如何在vue.js中让子路由之间使用animate进行切换效果

一、引入animate.css

二、用<transition></transition>包裹<router-view></router-view>

三、具体实现

<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">

<router-view class="animated"></router-view>

</transition>

<div v-show="ok" class="animated" transition="bounce">Watch me bounce</div>

Vue.transition('bounce', {

enterClass: 'bounceInLeft',

leaveClass: 'bounceOutRight'

})

利用vue+定时器实现一个竖排列表每条滚动的效果，废话不多说，先上动效

1.我们设置一个定时器，没过一段时间使盒子中的ul整体上移一个li的高度，因此需要改变ul的margin-top样式，我们先设置一个状态为动画开关和一个数据列表。

2.给我们需要加动画的列表设置动态样式，当开关animate为true时改变margin-top的值。

5.我们为组件设置完成动画需要的样式

4.接下来我们封装一个方法showMarquee，在创建dom节点每两秒调用一次该函数，由于列表过短会导致动效不好看，所以在调用定时器之前可以对数组长度进行判断，自行修改。函数体为在调用之后先让ul上移，过500毫秒之后执行一次动画停止，在停止期间 *** 作数据列表，将列表第一项push给列表最后一项，再删除第一项，保证列表可以循环滚动。

在获取列表之后调用即可

如果需要直接复制粘贴整体思路即可，样式列表能根据需求而定，亲测好用！！

---