Front-end time helped a friend write an animation effect portal
After using it, my friend reported that there was a freeze phenomenon in the webview of the app, and then he sent me an improved version with similar ideas.
<template>
<div id="box">
<ul id="con1" ref="con1" :class="{ anim: animate == true }">
<li
class="item"
:class="{ current: index == 0 }"
v-for="(item, index) in items"
:key="index"
>
{
{
item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
animate: false,
items: [
{
name: "马云", isActive: true },
{
name: "雷军", isActive: false },
{
name: "马化腾", isActive: false },
// {name:"王勤4",isActive:false},
// {name:"雷军1",isActive:false},
// {name:"王勤2",isActive:false}
],
};
},
created() {
setInterval(this.scroll, 5000);
},
mounted() {
},
methods: {
scroll() {
this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画,所以这里需要设置true
document.getElementsByClassName("item")[1].className = "item okkk";
setTimeout(() => {
// 这里直接使用了es6的箭头函数,省去了处理this指向偏移问题,代码也比之前简化了很多
this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
document.getElementsByClassName("item")[1].className = "item";
this.items.shift(); //删除数组的第一个元素
this.animate = false; // margin-top 为0 的时候取消过渡动画,实现无缝滚动
}, 4000);
},
},
};
</script>
<style lang="scss" scoped>
#box {
width: 300px;
height: 64px;
overflow: hidden;
padding-left: 30px;
border: 1px solid black;
font-size: 12px;
}
.anim {
transition: all 4s;
margin-top: -30px;
}
.okkk {
transition: all 4s;
font-size: 20px;
opacity: 1;
color: red;
}
#con1 li {
list-style: none;
line-height: 30px;
height: 30px;
opacity: 0.7;
}
.current {
color: red;
font-size: 20px;
}
</style>