一个常见的文字无缝滚动效果

基本结构：

 <div class="container">

            <div class="marquee-wrap">

                <ul class="marquee-list" :class="{'animate-up':animateUp}">

                    <li v-for="(item,index) in arr" :key="index">{{item}}</li>

                </ul>

            </div>

  </div>

--------------------------------------------------------------------------------------------

：css：

 .marquee-wrap {

            width: 80%;

            height: 40px;

            background: rgba(0, 0, 0, 0.2);

            margin: 0 auto;

            overflow: hidden;

        }

        .marquee-wrap li {

            width: 100%;

            height: 100%;

            padding: 0 20px;

            list-style: none;

            line-height: 40px;

            text-align: center;

            color: #fff;

        }

        .animate-up {

            transition: all 0.5s ease-in-out;

            transform: translateY(-40px);

        }

----------------------------------------------------------------------

   mounted() {

            setInterval(this.scrollAnimate, 2000)

},

methods: {

            scrollAnimate() {

                this.animateUp = true;

                setTimeout(() => {

                    this.arr.push(this.arr[0])

                    this.arr.shift()

                    this.animateUp = false

                }, 500);

                this.$once('hook:beforeDestroy', () => {

                    clearInterval(timer)

                })

            },

}

---------------------------完整代码示例-------------------------------

特别注意：scrollAniamation函数中的定时器是setTimeout