html怎么制作公告滚动字幕,实现公告文字轮播效果

公告

暂无公告

{{text.val}}

import baseModule from '../baseModule'

export default {

name: "announcementList",

computed: {

text() {

return {

id: this.number,

val: this.textArr[this.number]

}

}

},

mounted() {

this.startMove()

},

methods: {

startMove() {

// eslint-disable-next-line

let timer = setTimeout(() => {

if (this.number === 2) {

this.number = 0;

} else {

this.number += 1;

}

this.startMove();

}, 2000); // 滚动不需要停顿则将2000改成动画持续时间

}

},

data() {

return {

textArr: [

'1 第一条公告',

'2 第二条公告第二条公告',

'3 第三条公告第三条公告第三条公告'

],

number: 0

}

},

}

.announcementList {

margin: 0;

padding: 0;

font-size: 14px;

.lable {

margin:5px 0px 7px 10px;

}

.displayContent {

color: #9f9f9f;

text-align: center;

}

.textBox {

width: 100%;

height: 35px;

margin: 0 auto;

margin-top: 3px;

overflow: hidden;

position: relative;

text-align: center;

}

.text {

width: 100%;

position: absolute;

bottom: 0;

}

.slide-enter-active, .slide-leave-active {

transition: all 0.5s linear;

}

.slide-enter {

transform: translateY(20px) scale(1);

opacity: 1;

}

.slide-leave-to {

transform: translateY(-20px) scale(0.8);

opacity: 0;

}

}