您好,登錄后才能下訂單哦!
這篇文章主要介紹CSS3中transition如何實(shí)現(xiàn)通知消息輪播條,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
Vue 版本,拷貝到文件即可使用
<template> <!-- 輪播視圖 --> <div id="carousel-view"> <!-- 輪播列表 --> <ul id="carousel-list-view" :class="{ 'carousel-animated':isAnimated }"> <li v-for="(item, index) in dataSource" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { data () { return { // 開啟動畫 isAnimated: false, // 輪播數(shù)據(jù) dataSource: ['dzm', 'xyq', '啊啊'] } }, created () { // 開啟定時器 setInterval(this.scroll, 1000) }, methods: { // 滾動動畫 scroll () { // 開啟動畫 this.isAnimated = true // 倒計(jì)時動畫時間 setTimeout(() => { // 將數(shù)組第一個元素添加到數(shù)組尾部 this.dataSource.push(this.dataSource[0]) // 移除數(shù)組第一個元素 this.dataSource.shift() // 關(guān)閉動畫 this.isAnimated = false // 動畫時間需要與 .carousel-animated 中設(shè)置的時間一致 }, 500) } } } </script> <style scoped> #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); } </style>
以上是“CSS3中transition如何實(shí)現(xiàn)通知消息輪播條”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。