vue文字上下循环滚动效果

vue文字上下循环滚动效果

html:

<h3 style="line-height: 50px;text-align: center">vue文字滚动</h3>
<div class="vueBox">
<div class="marquee">
<div class="marquee_title">
<span>最新公告</span>
</div>
<div class="marquee_box">
<!-- 
                    css样式表中 写的类名；
                    当前这个类上的样式，什么时候 作用到 当前标签上，
                    取决于模型层中的animate的值 是真 还是假！！
                    是真， 这个类样式，会作用到当前标签身上！
                 -->
<ul class="marquee_list" v-bind:class="{marquee_top:animate}">
<li v-for="item 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>

css:

div,ul,li,span,img{
margin: 0;
padding: 0;
display: flex;
box-sizing: border-box;
}
.marquee{
width: 100%;
height: 50px;
align-items: center;
color: #3A3A3A;
background-color: #ffe4ca;
display: flex;
box-sizing: border-box;
}

.marquee_title{
padding: 0 20px;
height: 30px;
font-size: 14px;
border-right: 1px solid #fff;
align-items: center;
}

.marquee_box{
display: block;
position: relative;
width: 60%;
height: 30px;
overflow: hidden;
}

.marquee_list{
display: block;
position: absolute;
top: 0;
left: 0;
}
.marquee_top{
/* css3的过渡动画 */
transition: all 0.5s;
/* 让整个 ul 无序列表 垂直 向上 移动 30像素 */
margin-top: -30px;
}

.marquee_list li{
height: 30px;
line-height: 30px;
font-size: 14px;
padding-left: 20px;
}

.marquee_list li span{
padding: 0 2px;
}

.red{
color: #FF0101;
}

vuejs:

<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:'.vueBox',
data:{
marqueeList:[
{
name: '开心果123',
city: '北京',
amount: 360
},
{
name: '芒果干',
city: '上海',
amount: 470
},
{
name: '草莓干',
city: '广州',
amount: 260
},
{
name: '无核白葡萄干',
city: '新疆',
amount: 890
}
],
animate: false
},
// 生命周期函数
created:function(){
// 定时器
setInterval(this.showMarquee,1000);
},
methods:{
showMarquee:function(){
//1.我们要让ul标签 向上能移动
this.animate = true;
// 2.在你这函数发生的过程中，我就做 另外一件小事情---我 让 数组中的每个位置上的内容 ，发生 位置的 调整
setTimeout(()=>{
// (1) 把数组中的 第一个位置上的内容拿到，然后给他 添加到 数组的 末尾
this.marqueeList.push(this.marqueeList[0]);
// (2) 把数组中的 第一个位置上的内容，删掉
this.marqueeList.shift();
// (3) 把 开关 设置 为 false
this.animate = false;

},500)
}
}
})
</script>