h2 {
margin: 20px 0
}
.text-container {
width: 500px;
height: 30px;
line-height: 30px;
margin: 10px auto;
border: 1px solid cornflowerblue;
overflow: hidden;
}
.text, .text2 {
margin: 0;
}
.inner-container {
animation: myMove 5s linear infinite;
animation-fill-mode: forwards;
}
.slide-enter-active, .slide-leave-active {
transition: all 0.5s linear;
}
.slide-leave-to {
transform: translateY(-20px);
}
.slide-enter {
transform: translateY(20px);
}
demo11
文字无缝滚动+停顿滚动 -- CSS动画
文字停顿滚动
{{text.val}}
stop
const totalDuration = 2000;
var POLLDATA = [4, 5, 6];
new Vue({
// 选项
el: '#example',
data: {
arr: [
'1',
'2',
'3'
],
number: 0,
maxValue: 5,
pollIndex: 0,
timer: null,
},
computed: {
text() {
return {
id: this.number,
val: this.arr[this.number]
}
}
},
mounted() {
this.startMove()
},
methods: {
startMove() {
this.timer = setTimeout(() => {
// this.arr.push(POLLDATA.shift()) && POLLDATA.push(this.arr.shift());
// (this.number === this.arr.length - 1) ? this.number = 0 : this.number += 1;
if (this.number === this.arr.length - 1) {
this.number = 0
} else {
this.number += 1;
}
this.startMove();
console.log(this.arr);
}, totalDuration)
},
stop: function () {
clearTimeout(this.timer);
}
},
})
一键复制
编辑
Web IDE
原始数据
按行查看
历史