css3 ใช้ฟังก์ชันเพลย์ลิสต์การเลื่อนแบบไดนามิก

 .ข้อความ
        ม้าหมุนชื่อแอนิเมชัน
        แอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชันเชิงเส้น
        ภาพเคลื่อนไหววนซ้ำนับอนันต์
        .ข้อความ-รายการ
            ตัวชี้เคอร์เซอร์
            ขอบบนสุด 10px
        &.หยุดเล่น
            สถานะการเล่นภาพเคลื่อนไหวหยุดชั่วคราว
            -
              คุณสมบัติ CSS3 Animation-play-state หยุดภาพเคลื่อนไหวชั่วคราวเมื่อถูกหยุดชั่วคราว และดำเนินการภาพเคลื่อนไหวต่อไปเมื่อทำงาน*/
    @keyframes ม้าหมุน {
        0% {
            แปลงร่าง: แปล Y(0%)
        -
        100% {
            แปลงร่าง: แปล Y(-50%)
        -
    -

 <แม่แบบ>
    <div>
        <div class="top-line">
            <div class="box-title">
                <span class="title">XXXX แผนที่เฉพาะเรื่อง</span>
            </div>
        </div>
        <div class="กล่องเลื่อน">
            <ul class = "ข้อความ" @mouseover = "stopAnim" @mouseout = "runAnim" v-if = "list.length"
                :style="{ AnimationDuration: AnimationDuration }" :class="{ stopPlay: AnimationPlayState }">
                <li class="message-item" v-for="(รายการ, ดัชนี) ในรายการ" :key="index" @click="toDetail(item)">
                    <div class="ข้อความบน">
                        <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>
</แม่แบบ>

 <สคริปต์>
นำเข้า test11List จาก '@/assets/test11List'
ค่าเริ่มต้นการส่งออก {
    ข้อมูล() {
        กลับ {
            แอนิเมชั่นระยะเวลา: '',
            แอนิเมชันPlayState: เท็จ
            รายการ: test11List.list,
            หมวดหมู่: ''
        -
    -
    ติด() {
        นี้.getData()
    -
    วิธีการ: {
        รับข้อมูล() {
            ให้ data = this.list
            ถ้า (data.length <= 2) {
                this.animationPlayState = จริง
                this.animationDuration = 2 + 's'//ระยะเวลาแอนิเมชั่น} else {
                // แอนิเมชั่น Marquee this.animationDuration = data.length * 2 + 's'
                this.list = this.list.concat (this.list)
            -
        -
        stopAnim() {//เมาส์เคลื่อนเข้าสู่ภาพเคลื่อนไหวหยุดชั่วคราว this.animationPlayState = true
        -
        runAnim() {//การลบเมาส์ยังคงเคลื่อนไหวต่อไปหาก (this.list.length > 2) {
                this.animationPlayState = เท็จ
            -
        -
    -
-
</สคริปต์>

 <style lang="สไตลัส" กำหนดขอบเขต>
    -
        ระยะขอบ: 0
        ช่องว่างภายใน: 0
    -
    อูล{
        รายการสไตล์: ไม่มี
    -
    .กล่องเลื่อน{
        กว้าง 100%
        ความสูง 800px
        ล้นซ่อนอยู่
        ขอบ 2px สีแดงทึบ
    -
    .box-ชื่อ
        เส้นสูง 34px
        ขนาดตัวอักษร 16px
        พื้นหลัง: สีน้ำเงิน
        สี: #fff
        ความทึบ 1
    .ข้อความ
        ม้าหมุนชื่อแอนิเมชั่น
        แอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชันเชิงเส้น
        ภาพเคลื่อนไหววนซ้ำนับอนันต์
        .ข้อความ-รายการ
            ตัวชี้เคอร์เซอร์
            ขอบบนสุด 10px
        &.หยุดเล่น
            สถานะการเล่นภาพเคลื่อนไหวหยุดชั่วคราว
            -
              คุณสมบัติ CSS3 Animation-play-state หยุดภาพเคลื่อนไหวชั่วคราวเมื่อถูกหยุดชั่วคราว และดำเนินการภาพเคลื่อนไหวต่อไปเมื่อทำงาน*/
    .ไม่มี
        กึ่งกลางการจัดข้อความ
        ความสูงบรรทัด 537px
        สี #fff
    @keyframes ม้าหมุน {
        0% {
            แปลงร่าง: แปล Y(0%)
        -
        100% {
            แปลงร่าง: แปล Y(-50%)
        -
    -
</สไตล์>