console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.four_events{
width: 500px;
height: 100px;
border: 2px solid #fbc2eb;
border-radius: 5px;
text-align: center;
overflow-y: hidden;
}
li{
line-height: 30px;
}
.animate-up {
transition: all 1s linear;
transform: translateY(-30px);
}
</style>
</head>
<body>
<div class="events" id="app">
<ul class="four_events" @mouseenter="enterFun()" @mouseleave="leaveFun()">
<li v-for="(txt,index) in listData" :key="index" :class="{'animate-up': animateUp}">{{txt}}</li>
</ul>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
timer: null,
time:1000,
timeout:null,
animateUp: false,
text1: ['螃蟹在剥我的壳，笔记本在写我', '漫天的我落在枫叶上雪花上', '而你在想我'],
listData: ['你背不下来的书，总有人能背下来。', '你做不出来的题，总有人能做出来。', '你愿意拖到明天的事总有人今天努力做完。', '那么不好意思，你想去的学校也只能別人去了。', '你想过的人生也只能别人过了。']
},
mounted() {
this.scrollAnimate()
},
methods: {
scrollAnimate() {
clearInterval(this.timer)
this.timer = setInterval(() => {
this.animateUp = true
this.timeout=setTimeout(() => {
this.listData.push(this.listData[0])
this.listData.shift()
this.animateUp = false
}, this.time)
}, this.time+20);
},
enterFun() {
clearInterval(this.timer)
},
leaveFun() {
this.scrollAnimate();
}
},
destroyed() {
clearInterval(this.timer)
}
})
</script>
</body>
</html>