css3 implémente la fonction de liste de lecture à défilement dynamique

 .messages
        carrousel de noms d'animation
        fonction de synchronisation d'animation linéaire
        nombre d'itérations d'animation infini
        .élément de message
            pointeur du curseur
            marge supérieure 10px
        &.stopPlay
            état de lecture de l'animation en pause
            /**
              La propriété CSS3 animation-play-state met l'animation en pause lorsqu'elle est en pause et continue l'animation lorsqu'elle est en cours d'exécution*/
    Carrousel @keyframes {
        0% {
            transformer : traduireY(0%)
        }
        100 % {
            transformation : traduireY(-50%)
        }
    }

 <modèle>
    <div>
        <div class="top-line">
            <div class="box-title">
                <span class="title">Carte thématique 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="(élément, index) dans la liste" :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="aucun" v-else>
                Pas de contenu pour l'instant</div>
        </div>
    </div>
</modèle>

 <script>
importer test11List depuis '@/assets/test11List'
exporter par défaut {
    données() {
        retour {
            animationDurée : ',
            animationPlayState : faux,
            liste : test11List.list,
            catégorie: ''
        } ;
    },
    monté() {
        ceci.getData()
    },
    méthodes : {
        getData() {
            laissez les données = this.list
            si (data.length <= 2) {
                this.animationPlayState = vrai
                this.animationDuration = 2 + 's'//Durée de l'animation} else {
                // Animation de chapiteau this.animationDuration = data.length * 2 + 's'
                this.list = this.list.concat(this.list)
            }
        },
        stopAnim() {//La souris se déplace dans l'animation de pause this.animationPlayState = true
        },
        runAnim() {//La suppression de la souris continue l'animation if (this.list.length > 2) {
                this.animationPlayState = faux
            }
        }
    },
} ;
</script>

 <style lang="stylus" scoped>
    *{
        marge : 0
        remplissage : 0
    }
    ul{
        style de liste : aucun
    }
    .scroll-box{
        largeur 100%
        hauteur 800px
        débordement caché
        bordure 2px rouge uni
    }
    .box-titre
        hauteur de ligne 34px
        taille de police 16px
        fond : bleu
        couleur : #fff
        opacité 1
    .messages
        carrousel de noms d'animation
        fonction de synchronisation d'animation linéaire
        nombre d'itérations d'animation infini
        .élément de message
            pointeur du curseur
            marge supérieure 10px
        &.stopPlay
            état de lecture de l'animation en pause
            /**
              La propriété CSS3 animation-play-state met l'animation en pause lorsqu'elle est en pause et continue l'animation lorsqu'elle est en cours d'exécution*/
    .aucun
        centre d'alignement du texte
        hauteur de ligne 537px
        couleur #fff
    Carrousel @keyframes {
        0% {
            transformer : traduireY(0%)
        }
        100 % {
            transformation : traduireY(-50%)
        }
    }
</style>