解决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.rhkb.cn/news/177725.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

21款奔驰GLC300L升级23P驾驶辅助 出行更加的安全

驾驶辅助和自动驾驶的区别就是需要人为去接管&#xff0c;虽然车辆会根据道路自己行驶&#xff0c;弯道上也能居中自动修正行驶&#xff0c;长时间不接管方向盘&#xff0c;系统会提示人为接管&#xff0c;这就是奔驰的23P驾驶辅助系统&#xff0c; 很多车友升级23P驾驶辅助系…

【AUTOSAR】【以太网】EthSyn

AUTOSAR专栏——总目录_嵌入式知行合一的博客-CSDN博客文章浏览阅读215次。本文主要汇总该专栏文章,以方便各位读者阅读。https://xianfan.blog.csdn.net/article/details/132072415 目录 一、概述 二、功能描述 2.1 初始化

【MySQL】MySQL的安装与配置环境变量(使其在控制台上使用)

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《MySQL》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&a…

如何调整职场心态,提高工作表现

文章目录 介绍职场分析对比历年职场需求开发者地域分布开发者工作状态职场晋升之路 职场经验控制情绪保持好奇心提升核心能力 职场转行结论 介绍 职场中的心态调整对于我们在工作中表现的影响非常重要。作为一名全栈开发者&#xff0c;我深知在 AI 算法和云技能领域工作的挑战…

Windows环境下使用VLC获取到大疆无人机的RTMP直播推流

1.环境准备 1.安装nginx 1.7.11.3 Gryphon 下载地址&#xff1a;http://nginx-win.ecsds.eu/download/ 下载nginx 1.7.11.3 Gryphon.zip&#xff0c;解压后修改文件夹名称为nginx-1.7.11.3-Gryphon&#xff1b; 2.安装nginx-rtmp-module 下载地址&#xff1a;GitHub - arut…

Vue动态树、配置请求路径、表格数据显示、实现分页、创建书本管理组件、点击菜单实现路由跳转以及系统首页配置。

目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单导航 2.2.3.1 先构建一级导航菜单 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 3. 系统首页配置 4. 表格数据显示 4.…

开发第一个flutter app的六个关键步骤

Flutter这些年发展的很快&#xff0c;特别是在 Google 持续的加持下&#xff0c;Flutter SDK 的版本号已经来到了 3开头&#xff0c;也正式开始对 Windows、macOS 和 Linux 桌面环境提供支持。如果从 Flutter 特有的优势来看&#xff0c;我个人认为主要是它已经几乎和原生的性能…

Express框架开发接口之req.params、req.query与req.body的区别

1.req.query 用于get请求 http://localhost:3000/user?usernameljz&age1 获取 URL 中携带的查询参数 通过req.query对象&#xff0c;可以访问到客户端通过查询字符串的形式&#xff0c;发送到服务器的参数&#xff1a; 2.req.params 用于get请求 url路径为&#xff…

什么是神经网络,它的原理是啥?(2)

参考&#xff1a;https://www.youtube.com/watch?vmlk0rddP3L4&listPLuhqtP7jdD8CftMk831qdE8BlIteSaNzD 视频3&#xff1a;什么是激活函数&#xff1f;为什么我们需要激活函数&#xff1f;它的类型有哪些&#xff1f; 为什么需要激活函数&#xff1f;如果没有激活函数&…

京东平台数据分析(京东销量):2023年9月京东吸尘器行业品牌销售排行榜

鲸参谋监测的京东平台9月份吸尘器市场销售数据已出炉&#xff01; 根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;今年9月&#xff0c;京东吸尘器的销量为19万&#xff0c;环比下滑约12%&#xff0c;同比下滑约25%&#xff1b;销售额为1.2亿&#xff0c;环比下滑约11%&…

历年网规上午真题笔记(2015年)

解析: 变更控制为“问题识别”——“问题分析与变更描述”——“变更分析与成本计算”——“变更实现”——“修改后的需求” 自动化工具能够帮助变更控制过程更有效地运作,能有效收集、存储、管理变更,工具应该具备的特征如下: 可定义变更请求中的数据可定义变更请求生命…

【Proteus仿真】【51单片机】数控稳压可调电源设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用动态数码管、按键、PCF8591 AD/DAC、LM358放大电路模块等。 主要功能&#xff1a; 系统运行后&#xff0c;系统默认输出直流5V&#xff0c;数码管…

SOLIDWORKS PDM缩短图纸从设计到发布时间

SOLIDWORKS线上协同设计、线上审核、版本管理、任务等大大缩短图纸从设计到发布时间。 在SOLIDWORKS PDM 中工作流程是整个系统的骨架和脉络&#xff0c;所有的文档都需要进入某一工作流程&#xff0c;所有的操作及权限&#xff0c;都依附于特定的工作流程。SOLIDWORKS PDM的工…

2003 - Can‘t connect to MysQL server on ‘39.108.169.0‘ (10060 “Unknown error“)

问题描述 某天和往常一样启动java项目&#xff0c;发现数据库出问题了&#xff0c;然后打开navicat&#xff0c;发现数据库的链接都连接不上&#xff0c; 一点击就会弹出报错框&#xff1a; 然后就各种上网搜索。 解决方案 上网查了一些解决方案&#xff0c;大部分都是说看…

Linux普通用户提权(sudo)

文章目录 Linux普通用户提权&#xff08;sudo&#xff09;1、在sudoers文件添加普通用户2、测试 Linux普通用户提权&#xff08;sudo&#xff09; 1、在sudoers文件添加普通用户 正常来说&#xff0c;普通用户初始是不具备提权的能力的&#xff0c;比如执行sudo ls会出现报警告…

人工智能基础_机器学习008_使用正规方程_损失函数进行计算_一元一次和二元一次方程演示_sklearn线性回归演示---人工智能工作笔记0048

自然界很多都是正态分布的,身高,年龄,体重...但是财富不是. 然后我们来看一下这个y = wx+b 线性回归方程. 然后我们用上面的代码演示. 可以看到首先import numpy as np 导入numby 数据计算库 import matplotlib.pyplot as plt 然后导入图形画的库 然后: X = np.linspace(0,…

好看的个人导航页源码

这款导航页源码 非常合适个人使用 简洁漂亮 放点自己经常用到的网站 还支持别人自助添加快捷书签 源码获取&#xff1a;https://www.qqmu.com/930.html

2023年【P气瓶充装】最新解析及P气瓶充装考试技巧

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 P气瓶充装最新解析参考答案及P气瓶充装考试试题解析是安全生产模拟考试一点通题库老师及P气瓶充装操作证已考过的学员汇总&#xff0c;相对有效帮助P气瓶充装考试技巧学员顺利通过考试。 1、【多选题】LNG加气站有哪些…

【数据库】形式化关系查询语言(一):关系代数Relational Algebra:基本运算、附加关系代数、扩展的关系代数

目录 一、关系代数Relational Algebra 1. 基本运算 a. 选择运算&#xff08;Select Operation&#xff09; b. 投影运算&#xff08;Project Operation&#xff09; 组合 c. 并运算&#xff08;Union Operation&#xff09; d. 集合差运算&#xff08;Set Difference Op…

DL4J无法下载MNIST数据集解决 Server returned HTTP response code: 403 for URL解决方法

报错情况 报错如下&#xff1a; 16:45:41.463 [main] INFO org.nd4j.nativeblas.Nd4jBlas - Number of threads used for OpenMP BLAS: 6 16:45:41.497 [main] INFO org.nd4j.linalg.api.ops.executioner.DefaultOpExecutioner - Backend used: [CPU]; OS: [Windows 10] 16:4…