CSS3中transition如何实现通知消息轮播条

这篇文章主要介绍CSS3中transition如何实现通知消息轮播条，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

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

<template>
<!--轮播视图-->
<divid="carousel-view">
<!--轮播列表-->
<ulid="carousel-list-view":class="{'carousel-animated':isAnimated}">
<liv-for="(item,index)indataSource":key="index">{{item}}</li>
</ul>
</div>
</template>

<script>
exportdefault{
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)
}
}
}
</script>

<stylescoped>
#carousel-view{
width:100%;
height:32px;
background-color:red;
overflow:hidden;
}
#carousel-list-view{
margin:0;
padding:0;
list-style:none;
}
#carousel-list-viewli{
line-height:32px;
height:32px;
}
.carousel-animated{
transition:transform0.5s;
transform:translateY(-32px);
}
</style>

以上是“CSS3中transition如何实现通知消息轮播条”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！