html纵向滚动,vue实现垂直滚动效果.html

Title

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

原始数据

按行查看

历史