当前位置: 首页 > news >正文

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

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设置的几秒而定

http://www.lryc.cn/news/214958.html

相关文章:

  • 电脑校园杂志电脑校园杂志社电脑校园编辑部2023年第9期目录
  • NSSCTF做题第十页(1)
  • 文件详细操作过程(C语言)
  • python使用ffmpeg来制作音频格式转换工具(优化版)
  • Debug技巧-不启用前端访问后端
  • 由CAB/PAB展开的一些思考
  • 系列十五、idea全局配置
  • 高德Go生态建设与研发实践
  • SpringCloud中Turbine 1.X版本BUG
  • SCSS的用法有哪些?分别举例
  • Spring controller层请求数据和响应数据的简单方法
  • 中国商界杂志中国商界杂志社中国商界编辑部2023年第10期目录查询
  • 记录 vue + vuetify + electron 安装过程
  • 短视频账号矩阵系统saas源码搭建/技术
  • 词向量模型Word2Vec
  • 公会发展计划(GAP):经过实战考验的 Web3 任务模式
  • 网络工程师基础知识(2)
  • 创建ABAP数据库表和ABAP字典对象-理解表字段02
  • 2021-arxiv-GPT Understands, Too
  • 【Spark】What is the difference between Input and Shuffle Read
  • redis相关的一些面试题?
  • 什么是Babel?它的主要作用是什么?
  • 【APP】go-musicfox - 一款网易云音乐命令行客户端, 文件很小Mac版本只有16.5M
  • P1284 三角形牧场
  • 【Linux】:Linux开发工具之Linux编辑器vim的使用
  • PFMEA详解结构分析——Sun FMEA软件
  • Qt扫盲-QFutureWatcher理论总结
  • 对比学习(contrastive Learning)
  • 译文:我们如何使 Elasticsearch 7.11 中的 date_histogram 聚合比以往更快
  • python设计模式4:适配器模式