<div class="fix-vote">
<div class="vote-list-box" :class="{ anim: animate }">
<div class="vote-item" v-for="(item, index) in voteList" :key="index">
<span>{{ item.nickname }}</span>
<span>爲</span>
<span>{{ item.appname }}</span>
<span>投上寶貴的一票</span></div>
</div>
</div>
export default {
name: "home",
data() {
return {
animate: false,
activeIndex: 0,
voteList: [
{ nickname: "nickname1", appname: "appname1" },
{ nickname: "nickname2", appname: "appname2" },
{ nickname: "nickname3", appname: "appname3" },
{ nickname: "nickname4", appname: "appname4" }
]
}
},
methods: {
scroll() {
setInterval(() => {
this.animate = true; // 向上滾動的時候需要添加css3過渡動畫
setTimeout(() => {
this.voteList.push(this.voteList[0]); // 將第一條放到最後
this.voteList.shift();
this.animate = false; // 動畫結束後清除(setTimeout的間隔時間要和過渡動畫的duration時間一樣)
}, 500);
}, 2000);
}
},
mounted() {
this.scroll();
}
};
.fix-vote
position:fixed
left:0
font-size:12PX
top:100px
width:100%
height:28PX
text-align:center
overflow:hidden
background:linear-gradient(89deg,rgba(254,161,110,.5),rgba(106,52,189,.5))
.vote-list-box
// transition:top .5s
// line-height:28PX
.vote-item
height:28PX
line-height:28PX
&.anim
transition:all .5s
margin-top:-28PX