解决uniapp的video标签和transition属性使用时出现错位的问题

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

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

这是显示第一个视频:

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

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

javascript 复制代码
<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>

点击按钮向上滑动的时候

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

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

相关推荐
web_Hsir6 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir6 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa8 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘10 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界1 天前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨1 天前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆1 天前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na011 天前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app