<div class="marquee_box">
<ul class="marquee_list" :class="{marquee_top:animate}">
<li v-for="(item, index) in marqueeList" :key="index">
<span class="winningListSpan2">{{item.Name}}</span>
<span class="winningListSpan3"> 抽中 </span>
<span class="winningListSpan4">{{item.Name}}</span>
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
animate: false,
marqueeList: [{
Name: '123'
},{
Name: '456'
}],
},
methods: {
showMarquee() {
this.animate = true;
setTimeout(() => {
this.marqueeList.push(this.marqueeList[0]);
this.marqueeList.shift();
this.animate = false;
}, 500)
},
getComputedStyle() {
var that = this;
$.ajax({
type: "get",
url: "xxxxxxxx/Register/GetWinningList",
success: function (data) {
console.log("data", data)
that.marqueeList = data.list;
setInterval(that.showMarquee, 1500);
}
});
},
},
mounted(){
this.getComputedStyle();
}
});
.marquee_box {
display: block;
position: relative;
width: 60%;
height: .5rem;
overflow: hidden;
}
.marquee_list {
display: block;
position: absolute;
top: 0;
left: 0;
}
.marquee_top {
transition: all 0.5s;
margin-top: -.5rem
}
.marquee_list li {
height: .5rem;
line-height: .5rem;
padding-left: .2rem;
}
.marquee_list li span {
padding: 0 2px;
}