css通知页面,CSS3 transition 实现通知消息轮播条

Vue 版本，拷贝到文件即可使用

• {{ item }}

export default {

data () {

return {

// 开启动画

isAnimated: false,

// 轮播数据

dataSource: ['dzm', 'xyq', '啊啊']

}

},

created () {

// 开启定时器

setInterval(this.scroll, 1000)

},

methods: {

// 滚动动画

scroll () {

// 开启动画

this.isAnimated = true

// 倒计时动画时间

setTimeout(() => {

// 将数组第一个元素添加到数组尾部

this.dataSource.push(this.dataSource[0])

// 移除数组第一个元素

this.dataSource.shift()

// 关闭动画

this.isAnimated = false

// 动画时间需要与 .carousel-animated 中设置的时间一致

}, 500)

}

}

}

#carousel-view {

width: 100%;

height: 32px;

background-color: red;

overflow: hidden;

}

#carousel-list-view {

margin: 0;

padding: 0;

list-style: none;

}

#carousel-list-view li {

line-height: 32px;

height: 32px;

}

.carousel-animated {

transition: transform 0.5s;

transform: translateY(-32px);

}

到此这篇关于CSS3 transition 实现通知消息轮播条的文章就介绍到这了,更多相关CSS3 transition轮播条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！