新闻消息向上滚动动画

html部分

<div class="scrollWrap">
	<ul :class="{ anim: animateFlag === true}"
		 @mouseenter="animateStopHandle"
		 @mouseleave="animateUpHandle"
	>
		<li>信息1</li>
		<li>信息2</li>
		<li>信息3</li>
		<li>信息4</li>
		<li>信息5</li>
		<li>信息6</li>
		<li>信息7</li>
	</ul>
</div>

js部分

data(){
	return {
		animateFlag:false,      //是否动画
	}
},
methods:{
	   /**向上滚动事件 */
	   animateScrollHandle() {
	       this.animateTimer=setInterval(()=>{
	            this.animateFlag=true;   
	            // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
	              setTimeout(()=>{      
	                    this.hotLaws_list.push(this.hotLaws_list[0]);   
	                    this.hotLaws_list.shift();              
	                    this.animateFlag = false;           
	               },750)
	            },1500)
	       },
         /**
         * 停止动画事件
         */
        animateStopHandle() {
            this.cleanAnimateHandle():'';
        },
        /**
         * 开启动画事件
         */
        animateUpHandle() {
           this.animateScrollHandle():'';
        },
        /**
         * 清除动画事件
         */
        cleanAnimateHandle() {
            if (this.animateTimer) {
                clearInterval(this.animateTimer);
                this.animateTimer = null;
            }
        },
}

css部分

	.scrollWrap{
		height:210px;
		li{
			height:30px;
		}
	}
    ul.anim{
        transition: all 0.75s;
        overflow:hidden;
    }