vue:页面过渡动画效果实现
学习完vue的文档,在项目里,结合上animate.css, 我们会这么实现<transitionname="page"enter-active-class="animated fadeIn"leave-active-class="animated fadeOut"><router-view&g...
·
学习完vue的文档,在项目里,结合上animate.css, 我们会这么实现
<transition
name="page"
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<router-view></router-view>
</transition>
这么添加,我们会发现,新页面进来时,旧页面会在新页面下面。在页面过渡动画展示期间,会在屏幕里同时看到两个页面。
解决方法是:加上mode,先消失,再进来。这样效果就自然了。
<transition
name="page"
mode="out-in"
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<router-view></router-view>
</transition>
更多推荐
已为社区贡献10条内容
所有评论(0)