CSS3은 동적 스크롤 재생 목록 기능을 구현합니다.

 .메시지
        애니메이션 이름 캐러셀
        애니메이션 타이밍 함수 선형
        애니메이션 반복 횟수 무한
        .메시지 항목
            커서 포인터
            여백 상단 10px
        &.stopPlay
            애니메이션 재생 상태가 일시 중지됨
            /**
              CSS3 animation-play-state 속성은 애니메이션이 일시 중지되면 일시 중지하고 애니메이션이 실행 중일 때는 계속 재생합니다*/
    @keyframes 캐러셀 {
        0% {
            변환: 변환Y(0%)
        }
        100% {
            변환: 변환Y(-50%)
        }
    }

 <템플릿>
    <div>
        <div 클래스="최상위">
            <div 클래스="상자 제목">
                <span class="title">XXXX 주제별 지도</span>
            </div>
        </div>
        <div 클래스="스크롤 상자">
            <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 클래스="메시지-탑">
                        <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>
</템플릿>

 <스크립트>
'@/assets/test11List'에서 test11List 가져오기
기본값 내보내기 {
    데이터() {
        반품 {
            animationDuration: '',
            animationPlayState: 거짓,
            목록: test11List.list,
            범주: ''
        };
    },
    탑재() {
        this.getData()
    },
    방법: {
        getData() {
            데이터 = this.list를 보자
            if (data.length <= 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 = 거짓
            }
        }
    },
};
</script>

 <style lang="stylus" 범위>
    *{
        여백: 0
        패딩: 0
    }
    ul{
        목록 스타일: 없음
    }
    .스크롤 상자{
        너비 100%
        높이 800px
        오버플로 숨김
        테두리 2px 단색 빨간색
    }
    .box-제목
        줄 높이 34px
        글꼴 크기 16px
        배경: 파란색
        색상: #fff
        불투명도 1
    .메시지
        애니메이션 이름 캐러셀
        애니메이션 타이밍 함수 선형
        애니메이션 반복 횟수 무한
        .메시지 항목
            커서 포인터
            여백 상단 10px
        &.stopPlay
            애니메이션 재생 상태가 일시 중지됨
            /**
              CSS3 animation-play-state 속성은 애니메이션이 일시 중지되면 일시 중지하고 애니메이션이 실행 중일 때는 계속 재생합니다*/
    .없음
        텍스트 정렬 센터
        줄 높이 537px
        색상 #fff
    @keyframes 캐러셀 {
        0% {
            변환: 변환Y(0%)
        }
        100% {
            변환: 변환Y(-50%)
        }
    }
</style>