css3 реализует функцию списка воспроизведения с динамической прокруткой

 .сообщения
        карусель с названиями анимации
        линейная функция синхронизации анимации
        количество итераций анимации бесконечное
        .message-item
            указатель курсора
            маржа сверху 10 пикселей
        &.stopPlay
            состояние воспроизведения анимации приостановлено
            /**
              Свойство анимации-play-state CSS3 приостанавливает анимацию, когда она приостановлена, и продолжает анимацию, когда она запущена*/
    @keyframes карусель {
        0% {
            трансформировать: транслироватьY(0%)
        }
        100% {
            преобразование: TranslateY (-50%)
        }
    }

 <шаблон>
    <дел>
        <div class="top-line">
            <div class="box-title">
                <span class="title">Тематическая карта XXXX</span>
            </div>
        </div>
        <div class="прокрутка-коробка">
            <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>
                </li>
            </ul>
            <div class="none" v-else>
                Содержимого пока нет</div>
        </div>
    </div>
</шаблон>

 <скрипт>
импортируйте test11List из @/assets/test11List
экспорт по умолчанию {
    данные() {
        возвращаться {
            анимацияПродолжительность: '',
            анимацияPlayState: ложь,
            список: test11List.list,
            категория: ''
        };
    },
    смонтирован() {
        это.getData()
    },
    методы: {
        получитьДанные() {
            пусть данные = this.list
            если (data.length <= 2) {
                this.animationPlayState = правда
                this.animationDuration = 2 + 's'//Продолжительность анимации} else {
                // Анимация выделения this.animationDuration = data.length * 2 + 's'
                этот.список = этот.список.concat(этот.список)
            }
        },
        stopAnim() {//Мышь переходит в режим паузы анимации this.animationPlayState = true
        },
        runAnim() {// Удаление мыши продолжает анимацию, если (this.list.length > 2) {
                this.animationPlayState = ложь
            }
        }
    },
};
</скрипт>

 <style lang="stylus" в области видимости>
    *{
        маржа: 0
        отступ: 0
    }
    ул {
        стиль списка: нет
    }
    .scroll-box{
        ширина 100%
        высота 800 пикселей
        переполнение скрыто
        граница 2 пикселя, сплошная красная
    }
    .box-title
        высота строки 34 пикселя
        размер шрифта 16 пикселей
        фон: синий
        цвет: #fff
        непрозрачность 1
    .сообщения
        карусель с названиями анимации
        линейная функция синхронизации анимации
        количество итераций анимации бесконечное
        .message-item
            указатель курсора
            маржа сверху 10 пикселей
        &.stopPlay
            состояние воспроизведения анимации приостановлено
            /**
              Свойство анимации-play-state CSS3 приостанавливает анимацию, когда она приостановлена, и продолжает анимацию, когда она запущена*/
    .никто
        выравнивание текста по центру
        высота строки 537 пикселей
        цвет #fff
    @keyframes карусель {
        0% {
            трансформировать: транслироватьY(0%)
        }
        100% {
            преобразование: TranslateY (-50%)
        }
    }
</стиль>