需要自动滚动循环播放的列表，使用纯CSS实现基础循环功能
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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%) } } |
完整代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<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> |
