ينفذ CSS3 وظيفة قائمة التشغيل ذات التمرير الديناميكي

 .رسائل
        دائري اسم الرسوم المتحركة
        الرسوم المتحركة-توقيت-وظيفة خطية
        الرسوم المتحركة-التكرار-عدد لا نهائي
        .رسالة البند
            مؤشر المؤشر
            الهامش العلوي 10 بكسل
        &.stopPlay
            تم إيقاف حالة تشغيل الرسوم المتحركة مؤقتًا
            /**
              تقوم خاصية حالة تشغيل الرسوم المتحركة في CSS3 بإيقاف الحركة مؤقتًا عند إيقافها مؤقتًا وتستمر في الحركة عند تشغيلها*/
    @keyframes دائري {
        0% {
            تحويل: ترجمة Y (0٪)
        }
        100% {
            التحويل: ترجمةY(-50%)
        }
    }

 <قالب>
    <ديف>
        <div class="top-line">
            <div class="box-title">
                <span class="title">خريطة موضوعية 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 = "(العنصر، الفهرس) في القائمة" :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>
                </لي>
            </ul>
            <div class="none" v-else>
                لا يوجد محتوى بعد</div>
        </div>
    </div>
</قالب>

 <النص البرمجي>
استيراد test11List من "@/assets/test11List"
التصدير الافتراضي {
    بيانات() {
        يعود {
            مدة الرسوم المتحركة: ''،
            الرسوم المتحركةPlayState: خطأ،
            القائمة: test11List.list،
            فئة: ''
        };
    },
    شنت () {
        هذا.getData()
    },
    طُرق: {
        الحصول على البيانات () {
            دع البيانات = this.list
            إذا (طول البيانات <= 2) {
                this.animationPlayState = true
                this.animationDuration = 2 + 's'//مدة الرسوم المتحركة} else {
                // الرسوم المتحركة المستطيلة this.animationDuration = data.length * 2 + 's'
                this.list = this.list.concat(this.list)
            }
        },
        stopAnim() {// يتحرك الماوس إلى الرسوم المتحركة المؤقتة this.animationPlayState = true
        },
        runAnim() {// تستمر إزالة الماوس في الرسوم المتحركة if (this.list.length > 2) {
                this.animationPlayState = false
            }
        }
    },
};
</script>

 <style lang="stylus" range>
    *{
        الهامش: 0
        الحشو: 0
    }
    أول {
        نمط القائمة: لا شيء
    }
    .مربع التمرير{
        العرض 100%
        الارتفاع 800 بكسل
        الفائض مخفي
        الحدود 2 بكسل باللون الأحمر الصلب
    }
    .box-العنوان
        ارتفاع الخط 34 بكسل
        حجم الخط 16 بكسل
        الخلفية: زرقاء
        اللون: #fff
        التعتيم 1
    .رسائل
        دائري اسم الرسوم المتحركة
        الرسوم المتحركة-توقيت-وظيفة خطية
        الرسوم المتحركة-التكرار-عدد لا نهائي
        .رسالة البند
            مؤشر المؤشر
            الهامش العلوي 10 بكسل
        &.stopPlay
            تم إيقاف حالة تشغيل الرسوم المتحركة مؤقتًا
            /**
              تقوم خاصية حالة تشغيل الرسوم المتحركة في CSS3 بإيقاف الحركة مؤقتًا عند إيقافها مؤقتًا وتستمر في الحركة عند تشغيلها*/
    .لا أحد
        مركز محاذاة النص
        ارتفاع الخط 537 بكسل
        اللون #fff
    @keyframes دائري {
        0% {
            تحويل: ترجمة Y (0٪)
        }
        100% {
            التحويل: ترجمةY(-50%)
        }
    }
</نمط>