也可以用vue动画去做
vue.js
代码如下：
<html>
<head>
<meta charset="UTF-8">
<title>最新战报</title>
<style>
</style>
</head>
<body>
<div class="vueBox">
<div class="marquee">
<div class="marquee_title">
<span>最新战报</span>
</div>
<div class="marquee_box">
<ul class="marquee_list" :class="{marquee_top:animate}">
<li v-for="(item,index) in marqueeList">
<span>{{item.name}}</span>
<span>在</span>
<span class="red"> {{item.city}}</span>
<span>杀敌</span>
<span class="red"> {{item.amount}}</span>
<span>万</span>
</li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: ".vueBox",
data: {
animate: false,
marqueeList: [
{
name: '1军',
city: '北京',
amount: '10'
},
{
name: '2军',
city: '上海',
amount: '20'
},
{
name: '3军',
city: '广州',
amount: '30'
},
{
name: '4军',
city: '重庆',
amount: '40'
}
]
},
created: function () {
setInterval(this.showMarquee, 2000)
},
methods: {
showMarquee: function () {
this.animate = true;
setTimeout(()=>{
this.marqueeList.push(this.marqueeList[0]);
this.marqueeList.shift();
this.animate = false;
},500)},
}
});
</script>
</html>
