Vuejs 相对初学者。我正在使用 Animate.css 库进行我想要的过渡。
它在不滚动时基本上是 4 和 8 列布局,当我滚动时它变成 1 和 11。
没有转场效果很好,但整体效果不好看。
This is the URL , that I am using as inspiration
<div class="column is-4 is-hidden-touch" v-show="! isScroll">
<navcomponent :navScroll = "isScroll"></navcomponent>
</div>
<div class="column is-8" v-show=" ! isScroll">
<maincontent></maincontent>
</div>
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
<div class="column is-1 is-hidden-touch" v-show="isScroll">
<navcomponent :navScroll = "isScroll"></navcomponent>
</div>
</transition>
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
<div class="column is-11" v-show=" isScroll">
<maincontent></maincontent>
</div>
</transition>
任何人都可以指出我做错了什么吗?
最佳答案
我觉得这个方法不错。您始终可以从 jsFiddle 开始 然后从那里去。
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
<div v-if="showWhenCondition">
</div>
</transition>
带有 v-if
或 v-show
的转换和标记应该确实足够了。您能否详细说明实际发生的情况?控制台有错误吗?
关于css - Vuejs Animate.css 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44794501/