CSS3 implementiert die dynamische Scroll-Playlist-Funktion

 .Nachrichten
        Karussell mit Animationsnamen
        Animation-Timing-Funktion linear
        Animationsiterationsanzahl unendlich
        .message-item
            Cursorzeiger
            Rand oben 10 Pixel
        &.stopPlay
            Animationswiedergabestatus angehalten
            /**
              Die CSS3-Eigenschaft „animation-play-state“ pausiert die Animation, wenn sie angehalten wird, und setzt die Animation fort, wenn sie ausgeführt wird*/
    @keyframes Karussell {
        0 % {
            transformieren: TranslateY(0%)
        }
        100 % {
            transformieren: TranslateY(-50%)
        }
    }

 <Vorlage>
    <div>
        <div class="top-line">
            <div class="box-title">
                <span class="title">XXXX thematische Karte</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>
                Noch kein Inhalt</div>
        </div>
    </div>
</template>

 <Skript>
test11List aus „@/assets/test11List“ importieren
Standard exportieren {
    data() {
        zurückkehren {
            Animationsdauer: '',
            animationPlayState: false,
            Liste: test11List.list,
            Kategorie: ''
        };
    },
    mount() {
        this.getData()
    },
    Methoden: {
        getData() {
            let data = this.list
            if (data.length <= 2) {
                this.animationPlayState = true
                this.animationDuration = 2 + 's'//Animationsdauer} else {
                // Marquee-Animation this.animationDuration = data.length * 2 + 's'
                this.list = this.list.concat(this.list)
            }
        },
        stopAnim() {//Die Maus bewegt sich in die Pausenanimation this.animationPlayState = true
        },
        runAnim() {//Das Entfernen der Maus setzt die Animation fort, wenn (this.list.length > 2) {
                this.animationPlayState = false
            }
        }
    },
};
</script>

 <style lang="stylus" Scoped>
    *{
        Rand: 0
        Polsterung: 0
    }
    ul{
        Listenstil: keiner
    }
    .scroll-box{
        Breite 100 %
        Höhe 800px
        Überlauf ausgeblendet
        Rand 2px einfarbig rot
    }
    .box-title
        Zeilenhöhe 34px
        Schriftgröße 16px
        Hintergrund: blau
        Farbe: #fff
        Deckkraft 1
    .Nachrichten
        Karussell mit Animationsnamen
        Animation-Timing-Funktion linear
        Animationsiterationsanzahl unendlich
        .message-item
            Cursorzeiger
            Rand oben 10 Pixel
        &.stopPlay
            Animationswiedergabestatus angehalten
            /**
              Die CSS3-Eigenschaft „animation-play-state“ pausiert die Animation, wenn sie angehalten wird, und setzt die Animation fort, wenn sie ausgeführt wird*/
    .keiner
        Text zentriert ausrichten
        Zeilenhöhe 537px
        Farbe #fff
    @keyframes Karussell {
        0 % {
            transformieren: TranslateY(0%)
        }
        100 % {
            transformieren: TranslateY(-50%)
        }
    }
</style>