网站搭建申请免费软文发布平台

template：三个视频都每个占满屏幕，点击按钮滚动最外层bgBox元素，

 style: 想要加上动画过渡效果：

这是显示第一个视频：

 点按钮向上滑动滚动到第二个视频时：

视频错位了 ，因为视频消失又出现的时候transition过渡还没结束，所以错位了，这时候在点击按钮向上滚动的时候给控制视频消失/显示的样式延后0.3秒就行了，如(v-if)

<div class="bgBox"><video v-if="videoStep == 1" src="../static/video.mp4" :autoplay="true"></video>
</div>
<div class="bgBox"><video v-if="videoStep == 2" src="../static/video.mp4" :autoplay="true"></video>
</div>
<div class="bgBox"><video v-if="videoStep == 3" src="../static/video.mp4" :autoplay="true"></video>
</div>

点击按钮向上滑动的时候

let temNum = this.videoStep;
this.videoStep = 0;//视频消失
setTimeout(()=>{this.videoStep = temNum + 1;//过0.3秒再出现就没有错位的问题了
},300)

注意：具体定时器设置几秒根据transition设置的几秒而定