css3 mengimplementasikan fungsi playlist bergulir dinamis

 .pesan
        korsel nama animasi
        linier fungsi waktu animasi
        animasi-iterasi-hitungan tak terbatas
        .item pesan
            penunjuk kursor
            margin-atas 10 piksel
        &.stopPlay
            status pemutaran animasi dijeda
            /**
              Properti animation-play-state CSS3 menjeda animasi saat dijeda dan melanjutkan animasi saat sedang berjalan*/
    @keyframes korsel {
        0% {
            transformasi: terjemahkanY(0%)
        }
        100% {
            transformasi: terjemahkanY(-50%)
        }
    }

 <templat>
    <div>
        <div class="garis atas">
            <div class="judul-kotak">
                <span class="title">Peta tematik 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, indeks) dalam daftar" :key="index" @click="toDetail(item)">
                    <div class="pesan-atas">
                        <span class="message-title">{{ item.nama }}</span>
                        <span class="message-time">{{ item.startDate }}</span>
                    </div>
                    <p class="message-content">{{ item.konten }}</p>
                </li>
            </ul>
            <div class="tidak ada" v-lainnya>
                Belum ada konten</div>
        </div>
    </div>
</templat>

 <skrip>
impor test11List dari '@/assets/test11List'
ekspor bawaan {
    data() {
        kembali {
            animasiDurasi: '',
            animasiPlayState: salah,
            daftar: test11List.daftar,
            kategori: ''
        };
    },
    dipasang() {
        ini.getData()
    },
    metode: {
        dapatkanData() {
            biarkan data = ini.daftar
            if (data.panjang <= 2) {
                ini.animationPlayState = benar
                this.animationDuration = 2 + 's'//Durasi animasi} else {
                // Animasi tenda this.animationDuration = data.length * 2 + 's'
                ini.daftar = ini.daftar.concat(daftar ini)
            }
        },
        stopAnim() {//Mouse bergerak ke animasi jeda this.animationPlayState = true
        },
        runAnim() {//Penghapusan mouse melanjutkan animasi if (this.list.length > 2) {
                ini.animationPlayState = salah
            }
        }
    },
};
</skrip>

 <style lang="stylus" tercakup>
    *{
        margin: 0
        bantalan: 0
    }
    kamu{
        gaya daftar: tidak ada
    }
    .kotak gulir{
        lebar 100%
        tinggi 800 piksel
        luapan tersembunyi
        batas 2px merah solid
    }
    .kotak-judul
        tinggi garis 34px
        ukuran font 16px
        latar belakang: biru
        warna: #fff
        opacity 1
    .pesan
        korsel nama animasi
        linier fungsi waktu animasi
        animasi-iterasi-hitungan tak terbatas
        .item pesan
            penunjuk kursor
            margin-atas 10 piksel
        &.stopPlay
            status pemutaran animasi dijeda
            /**
              Properti animation-play-state CSS3 menjeda animasi saat dijeda dan melanjutkan animasi saat sedang berjalan*/
    .tidak ada
        pusat perataan teks
        tinggi garis 537px
        warna #fff
    @keyframes korsel {
        0% {
            transformasi: terjemahkanY(0%)
        }
        100% {
            transformasi: terjemahkanY(-50%)
        }
    }
</gaya>