循环播放的
这是data部分
data() {
return {
prizeList: [
{ name: 0 },
{ name: 1 },
{ name: 2 },
{ name: 3 },
{ name: 4 }
]
}
}
这是我目前的代码,只能循环切换,没有动画效果
setInterval(async () => {
let first = this.prizeList.splice(0, 1)
this.prizeList.push(...first)
}
世界只因有你2017-05-19 10:45:20
可以换一种思路,使用transition实现
<p class="scroll-wrap">
<ul class="scroll-content" :style="{ top }">
<li v-for="item in prizeList">{{item.name}}</li >
</ul>
</p>
export default {
data () {
return {
prizeList: [
{ name: 0 },
{ name: 1 },
{ name: 2 },
{ name: 3 },
{ name: 4 }
],
activeIndex: 0
}
},
computed: {
top() {
return - this.activeIndex * 50 + 'px';
}
},
mounted() {
setInterval(_ => {
if(this.activeIndex < this.prizeList.length) {
this.activeIndex += 1;
} else {
this.activeIndex = 0;
}
}, 1000);
}
};
.scroll-wrap{
width: 200px;
height: 50px;
border: 1px solid blue;
overflow: hidden;
}
.scroll-content{
position: relative;
transition: top 0.5s;
li{
line-height: 50px;
text-align: center;
}
}
效果
怪我咯2017-05-19 10:45:20
vue官方文档
动画效果库
使用十分简单:
import 'animate'
<transition
name="custom-classes-transition"
enter-active-class="animated bounceIn" //animate 提供的动画效果
leave-active-class="animated bounceOutRight"
>
... //要使用动画效果的内容
</transition>