css3 implementa função de lista de reprodução de rolagem dinâmica

 .messagens
        carrossel de nomes de animação
        função de tempo de animação linear
        contagem de iterações de animação infinita
        .item de mensagem
            ponteiro do cursor
            margem superior 10px
        &.stopPlay
            animação-play-state pausado
            /**
              A propriedade CSS3 Animation-Play-State pausa a animação quando ela é pausada e continua a animação quando está em execução*/
    carrossel de @keyframes {
        0% {
            transformar: traduzirY(0%)
        }
        100% {
            transformar: traduzirY(-50%)
        }
    }

 <modelo>
    <div>
        <div class="linha superior">
            <div class="box-title">
                <span class="title">Mapa temático XXXX</span>
            </div>
        </div>
        <div class="scroll-box">
            <ul class="messages" @mouseover="stopAnim" @mouseout="runAnim" v-if="list.length"
                :style="{animaçãoDuration:animaçãoDuration }" :class="{ stopPlay:animationPlayState }">
                <li class="message-item" v-for="(item, índice) na lista" :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>
                Ainda não há conteúdo</div>
        </div>
    </div>
</template>

 <roteiro>
importar test11List de '@/assets/test11List'
padrão de exportação {
    dados() {
        retornar {
            animaçãoDuração: '',
            animaçãoPlayState: falso,
            lista: test11List.list,
            categoria: ''
        };
    },
    montado() {
        this.getData()
    },
    métodos: {
        getDados() {
            deixe dados = this.list
            if (data.comprimento <= 2) {
                this.animationPlayState = verdadeiro
                this.animationDuration = 2 + 's' // Duração da animação} else {
                // Animação de letreiro this.animationDuration = data.length * 2 + 's'
                esta.lista = esta.lista.concat(esta.lista)
            }
        },
        stopAnim() {//O mouse se move para a animação de pausa this.animationPlayState = true
        },
        runAnim() {//A remoção do mouse continua a animação if (this.list.length > 2) {
                this.animationPlayState = falso
            }
        }
    },
};
</script>

 <style lang="stylus" escopo>
    *{
        margem: 0
        preenchimento: 0
    }
    ul{
        estilo de lista: nenhum
    }
    .caixa de rolagem{
        largura 100%
        altura 800px
        estouro oculto
        borda 2px vermelho sólido
    }
    .box-título
        altura da linha 34px
        tamanho da fonte 16px
        fundo: azul
        cor: #fff
        opacidade 1
    .messagens
        carrossel de nomes de animação
        função de tempo de animação linear
        contagem de iterações de animação infinita
        .item de mensagem
            ponteiro do cursor
            margem superior 10px
        &.stopPlay
            animação-play-state pausado
            /**
              A propriedade CSS3 Animation-Play-State pausa a animação quando ela é pausada e continua a animação quando está em execução*/
    .nenhum
        centro de alinhamento de texto
        altura da linha 537px
        cor #fff
    carrossel de @keyframes {
        0% {
            transformar: traduzirY(0%)
        }
        100% {
            transformar: traduzirY(-50%)
        }
    }
</estilo>