vue-cli实现文字跑马灯

刚刚开始学习vue,项目就有一个跑马灯的功能让添加，听说marqueen相当简单，但是听说被弃用了，是这样的，先获取到从数据库获取的文字内容，将它放入labaModel变量中，在created函数中去调用这个方法（相当于进来就走这个方法）

addLabaMessage: function() {
                var self = this;
                const url = 'Notify/LoadUserAllNotify'
                $.kkajax.get(url).then(response => {
                    console.log(response)
                    self.labaModel = response
                }).catch(err => {
                    alert("error");
                })
            },

<!--喇叭-->
            <div class="vueBox" style="background: #fdfbde;">
                <div class="marquee">
                    <div class="marquee_title">
                        <img style="width: 15px; height: 15px; margin-left: 4px;margin-top: 2px;" src="../../assets/home/laba.png" />
                    </div>
                    <div class="marquee_box">
                        <ul class="marquee_list" :class="{marquee_top:animate}">
                            <li v-for="(item, index) in labaModel" :key="index">
                                <span>{{item.content}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

然后在created中加个定时器，this.showMarquee也是一个方法

created:function () {
            this.addLabaMessage();
            setInterval(this.showMarquee, 2000);
        }

喇叭数据集合里面添加一个push(this.labaModel[0])，删除一个shift()，然后到这步之后我们再添加一下transition的动画就可以了

showMarquee: function() {
                this.animate = true;
                setTimeout(() => {
                    this.labaModel.push(this.labaModel[0]);
                    this.labaModel.shift();
                    this.animate = false;
                }, 1000)
            }

.marquee {
        width: 100%;
        height: 30px;
        align-items: center;
        color: #3A3A3A;
        background-color: #fdfbde;
        display: flex;
        box-sizing: border-box;
    }

    .marquee_title {
        padding: 0 20px;
        height: 20px;
        font-size: 12px;
        align-items: center;
    }

    .marquee_box {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;
        overflow: hidden;
    }

    .marquee_list {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    .marquee_top {
        transition: all 0.5s;
        margin-top: -30px
    }

    .marquee_list li {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        padding-left: 20px;
    }

    .marquee_list li span {
        padding: 0 2px;
        color: #f1543a;
    }

en.gif