css3でダイナミックスクロールプレイリスト機能を実装

 .messages
        アニメ名カルーセル
        アニメーション タイミング関数線形
        アニメーションの反復回数は無限です
        .メッセージ項目
            カーソルポインタ
            マージン上部 10px
        &.stopPlay
            アニメーションの再生状態が一時停止されました
            /**
              CSS3 のanimation-play-stateプロパティは、一時停止中にアニメーションを一時停止し、実行中にアニメーションを継続します*/
    @keyframes カルーセル {
        0% {
            変換: 変換Y(0%)
        }
        100% {
            変換: 変換Y(-50%)
        }
    }

<テンプレート>
    <div>
        <div class="トップライン">
            <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="{ アニメーションデュレーション: アニメーションデュレーション }" :class="{ stopPlay: アニメーションプレイステート }">
                <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>
</テンプレート>

 <スクリプト>
「@/assets/test11List」から test11List をインポートします
デフォルトをエクスポート {
    データ（） {
        戻る {
            アニメーション期間: '',
            アニメーションの再生状態: false、
            リスト: test11List.list、
            カテゴリ: ''
        };
    }、
    マウントされた() {
        this.getData()
    }、
    メソッド: {
        getData() {
            let data = 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 = false
            }
        }
    }、
};
</script>

 <style lang="stylus" スコープ>
    *{
        マージン: 0
        パディング: 0
    }
    ウル{
        リストスタイル: なし
    }
    .スクロールボックス{
        幅100%
        高さ800ピクセル
        オーバーフロー非表示
        ボーダー 2px 赤一色
    }
    .box-title
        行の高さ 34px
        フォントサイズ 16px
        背景: 青
        色: #fff
        不透明度1
    .messages
        アニメ名カルーセル
        アニメーション タイミング関数線形
        アニメーションの反復回数は無限です
        .メッセージ項目
            カーソルポインタ
            マージン上部 10px
        &.stopPlay
            アニメーションの再生状態が一時停止されました
            /**
              CSS3 のanimation-play-stateプロパティは、一時停止中にアニメーションを一時停止し、実行中にアニメーションを継続します*/
    。なし
        テキストを中央揃えにする
        行の高さ 537px
        色 #fff
    @keyframes カルーセル {
        0% {
            変換: 変換Y(0%)
        }
        100% {
            変換: 変換Y(-50%)
        }
    }
</スタイル>