css3实现动态滚动播放列表功能

    .messages         animation-name carousel         animation-timing-function linear         animation-iteration-count infinite         .message-item             cursor pointer             margin-top 10px         &.stopPlay             animation-play-state paused             /**               CSS3 animation-play-state 属性 值为paused时暂停动画，为running时继续动画              */     @keyframes carousel {         0% {             transform: translateY(0%)         }         100% {             transform: translateY(-50%)         }     }

<template>     <div>         <div class="top-line">             <div class="box-title">                 <span class="title">XXXX专题图</span>             </div>         </div>         <div class="scroll-box">             <ul class="messages" @mouseover="stopAnim" @mouseout="runAnim" v-if="list.length"                 :style="{ animationDuration: animationDuration }" :class="{ stopPlay: animationPlayState }">                 <li class="message-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">                     <div class="message-top">                         <span class="message-title">{{ item.name }}</span>                         <span class="message-time">{{ item.startDate }}</span>                     </div>                     <p class="message-content">{{ item.content }}</p>                 </li>             </ul>             <div class="none" v-else>                 暂无内容             </div>         </div>     </div> </template>

<script> import test11List from '@/assets/test11List' export default {     data() {         return {             animationDuration: '',             animationPlayState: false,             list: test11List.list,             category: ''         };     },     mounted() {         this.getData()     },     methods: {         getData() {             let data = this.list             if (data.length <= 2) {                 this.animationPlayState = true                 this.animationDuration = 2 + 's'//动画持续时间             } else {                 // 跑马灯动画                 this.animationDuration = data.length * 2 + 's'                 this.list = this.list.concat(this.list)             }         },         stopAnim() {//鼠标移入暂停动画             this.animationPlayState = true         },         runAnim() {//鼠标移除继续动画             if (this.list.length > 2) {                 this.animationPlayState = false             }         }     }, }; </script>

<style lang="stylus" scoped>     *{         margin: 0         padding: 0     }     ul{         list-style: none     }     .scroll-box{         width 100%         height 800px         overflow hidden         border 2px solid red     }     .box-title         line-height 34px         font-size 16px         background: blue         color: #fff         opacity 1     .messages         animation-name carousel         animation-timing-function linear         animation-iteration-count infinite         .message-item             cursor pointer             margin-top 10px         &.stopPlay             animation-play-state paused             /**               CSS3 animation-play-state 属性 值为paused时暂停动画，为running时继续动画              */     .none         text-align center         line-height 537px         color #fff     @keyframes carousel {         0% {             transform: translateY(0%)         }         100% {             transform: translateY(-50%)         }     } </style>