当前位置: 首页 > 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设置的几秒而定

相关文章:

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

template&#xff1a;三个视频都每个占满屏幕&#xff0c;点击按钮滚动最外层bgBox元素&#xff0c; style: 想要加上动画过渡效果&#xff1a; 这是显示第一个视频&#xff1a; 点按钮向上滑动滚动到第二个视频时&#xff1a; 视频错位了 &#xff0c;因为视频消失又出现的时候…...

电脑校园杂志电脑校园杂志社电脑校园编辑部2023年第9期目录

智慧校园 基于vue.js的“微校园”APP设计 吴秋伟 周慧 董锐 李仙云 余维 邓巧平 彭微1-3 探析AIGC对网络安全的革新&#xff1a;挑战与机遇共存 康良成 张朋4-6 文本信息自动摘要技术综述 滕宇飞7-9《电脑校园》投稿&#xff1a;cn7kantougao163.com 区块链应用于图书馆服务的策…...

NSSCTF做题第十页(1)

[GXYCTF 2019]禁止套娃 看源代码也没什么东西&#xff0c;扫一下看看 发现了git泄露 话不多说直接开整 下载下来了 flag.php 还是代码审计 <?php include "flag.php"; echo "flag在哪里呢&#xff1f;<br>"; if(isset($_GET[exp])){ if (!preg_…...

文件详细操作过程(C语言)

&#x1f31e;&#x1f31e;&#x1f31e;千淘万漉虽辛苦&#x1f31e;&#x1f31e;&#x1f31e; &#x1f31e;&#x1f31e;&#x1f31e;吹尽狂沙始到金&#x1f31e;&#x1f31e;&#x1f31e; &#x1f307;C语言文件操作 &#x1f34a;文件的定义&#x1f34b;什么是文…...

python使用ffmpeg来制作音频格式转换工具(优化版)

简介:一个使用python加上ffmpeg模块来进行音频格式转换的工具。 日志: 20231030:第一版,设置了简单的UI布局和配色,实现音频转为Mp3、AAC、wav、flac四种格式。可解析音频并显示信息,可设置转换后的保存路径 UI界面: 编程平台:visual studio code 编程语言:python 3…...

Debug技巧-不启用前端访问后端

在日常开发中&#xff0c;我们经常会遇到各种问题需要调试&#xff0c;前后端都启动需要耗费一定的时间和内存&#xff0c;方便起见&#xff0c;可以直接用抓包数据访问后端&#xff0c;这里我们需要用到Postman或者ApiFox 抓包数据 在系统前台触发后端请求&#xff0c;在控制…...

由CAB/PAB展开的一些思考

又到了一月保底一篇订阅号文章的时候&#xff0c;上周受到Oracle邀请&#xff0c;参加了在上海Oracle办公室举行的CAB&#xff08;The 13th Oracle China Customer Advisory Board Metting&#xff09;/ PAB&#xff08;The 3th Oracle China Partner Advisory Board Metting&…...

系列十五、idea全局配置

一、全局Maven配置 IDEA启动页面>Customize>All settings>Build,Execution,Deployment>Build Tools>Maven 二、全局编码配置 IDEA启动页面>Customize>All settings>Editor>File Encodings 三、全局激活DevTools配置 IDEA启动页面>Customize>A…...

高德Go生态建设与研发实践

序 高德在构建Go生态演化过程中&#xff0c;已经实现了QPS从0到峰值千万的飞跃&#xff0c;本篇文章主要介绍在此过程中积累的一些技术决策及性能优化和重构经验。阅读本文读者会有以下3点收获&#xff1a; 1.高德Go生态发展历程及现状分析 2.高德云原生Serverless落地情况&…...

SpringCloud中Turbine 1.X版本BUG

错误出现在spring-cloud-turbine-stream 包中&#xff0c;因为这个包会启动一个netty-port容器&#xff0c;并将它的server.port 设置为-1 &#xff0c;从而关闭了Servlet容器&#xff0c;这是官方包的一个Bug&#xff0c;不过Spring Boot 2.0已修复&#xff0c;要么升级包要么…...

SCSS的用法有哪些?分别举例

SCSS的用法主要有&#xff1a; 1&#xff1a; 变量&#xff1a;在SCSS中&#xff0c;我们可以通过 $ 符号来定义变量。比如&#xff0c;我们可以定义一个颜色变量 $color: red;&#xff0c;然后在我们需要使用这个颜色的时候&#xff0c;直接使用 $color 就可以了。 2&#x…...

Spring controller层请求数据和响应数据的简单方法

记录一些很基本的使用方法。 一、GET请求传参方法&#xff1a; 1.方法一&#xff1a;把参数传到&#xff1f;之后 使用注解RequestParam // 假如传值了current和limit /students?current1&limit20 RequestMapping(value "/students", method RequestMetho…...

中国商界杂志中国商界杂志社中国商界编辑部2023年第10期目录查询

要闻 我国旅游市场步入理性繁荣阶段 赵熠如; 10-11 产业 老国货品牌再迎高光时刻 能否留住流量 涂瀚文; 12-13《中国商界》投稿&#xff1a;cnqikantg126.com 金融集聚有力 促进长三角城市高质量发展 刘盛坤; 14-17 辽宁农贸市场亟待优化升级路径在哪儿&#x…...

记录 vue + vuetify + electron 安装过程

NodeJs 版本&#xff1a; 20 内容来自&#xff1a; Electron Vue.js Vuetify 构建跨平台应用_思月行云的博客-CSDN博客文章浏览阅读61次。Go coding!https://blog.csdn.net/kenkao/article/details/132600542 npm config set registry https://registry.npm.taobao.org np…...

短视频账号矩阵系统saas源码搭建/技术

一、短视频矩阵系统建模----技术api接口--获取用户授权 技术文档分享&#xff1a; 本系统采用MySQL数据库进行存储&#xff0c;数据库设计如下&#xff1a; 1.用户表&#xff08;user&#xff09;&#xff1a; - 用户ID&#xff08;user_id&#xff09; - 用户名&#xff08…...

词向量模型Word2Vec

Word2Vec CBOW连续词袋模型例子CBOW模型的embeddings层CBOW模型的线性层 总结 skip-gram跳字模型例子Skip-Gram模型的结构 CBOW和skip-gram的目标都是迭代出词向量字典&#xff08;嵌入矩阵&#xff09;——embeddings CBOW连续词袋模型 根据上下文词汇预测目标词汇 例子 使…...

公会发展计划(GAP):经过实战考验的 Web3 任务模式

2020 年 12 月&#xff0c;Yield Guild Games 踏上了一段征程&#xff0c;以表彰兢兢业业的 Web3 游戏玩家所付出的时间和努力&#xff0c;同时为他们提供利用自己的技能促进个人成长的机会。这一旅程的第一步是于 2022 年 7 月推出的公会发展计划&#xff08;GAP&#xff09;。…...

网络工程师基础知识(2)

一、端口可以分为系统端口、登记端口、客户端使用端口。 (1) 系统端口。该端口的取值范围为[0,1023]. (2) 登记端口。登记端口是为没有熟知端口号的应用程序使用的&#xff0c;端口范围为[1024,49151]。这些端口必须在 IANA 登记以避免重复。 (3) 客户端使用端口。这类端口仅…...

创建ABAP数据库表和ABAP字典对象-理解表字段02

理解表字段 这一步&#xff0c;您将定义表字段。首先&#xff0c;你需要了解你的需求: 内置的ABAP类型和新定义的字段类型 下面我们将会创建3个字段类型在数据库表中。 ●内置字段类型&#xff1a;最快的方法:应用系统已经提供好的字段类型&#xff0c;基本类型、长度和描述…...

2021-arxiv-GPT Understands, Too

2021-arxiv-GPT Understands, Too Paper&#xff1a; https://arxiv.org/abs/2103.10385 Code&#xff1a; https://github.com/THUDM/P-tuning Prompt 简单理解 举例来讲&#xff0c;今天如果有这样两句评论&#xff1a; 1. 什么苹果啊&#xff0c;都没有苹果味&#xff0c…...

Unity ECS帧同步实战:确定性模拟与Job化网络Tick

1. 这不是“又一个Unity网络教程”&#xff0c;而是帧同步在ECS架构下的真实落地切口很多人一看到“Unity多人对战”就下意识点开&#xff0c;结果发现是PhotonMonoBehaviour的旧路子&#xff1a;对象池、RPC调用、状态同步、插值补偿……代码越写越厚&#xff0c;逻辑越埋越深…...

量子神经网络抗噪优化:经典噪声层与可微架构搜索的协同设计

1. 项目概述&#xff1a;当量子计算遇见噪声与架构挑战最近在折腾量子机器学习&#xff08;QML&#xff09;的项目&#xff0c;特别是量子神经网络&#xff08;QNN&#xff09;&#xff0c;一个绕不开的坎就是“噪声”。无论是超导、离子阱还是光子平台&#xff0c;当前的含噪声…...

鸿蒙electron跨端框架PC导出管家实战:把交付前的检查、复制和导出做成一个工坊

前言 欢迎加入鸿蒙PC开发者社区&#xff0c;共同打造开发者工具生态&#xff1a;鸿蒙PC开发者社区 &#xff1a;https://harmonypc.csdn.net/ 项目开源地址&#xff1a;https://AtomGit.com/lqjmac/ele-daochuguanjia 我做 导出管家 时最先确认的&#xff0c;不是颜色和布局…...

宏裕塑胶长玻纤RTP材料技术创新与应用实践

导读&#xff1a;在工程塑料领域&#xff0c;长玻纤增强热塑性材料&#xff08;LFRT&#xff09;正成为高端制造转型的核心驱动力。宏裕塑胶长玻纤RTP材料技术创新与应用实践&#xff0c;通过整合国际顶尖资源与自主改性技术&#xff0c;为汽车轻量化、新能源装备等场景提供高性…...

C#与Unity的协作协议:从语法表层到引擎契约的深度解析

1. 这不是“学编程”&#xff0c;而是重新建立你和机器对话的语法系统很多人点开这个标题&#xff0c;心里想的是&#xff1a;“Unity游戏开发&#xff1f;那我得先学会C#&#xff0c;再学Unity编辑器&#xff0c;最后做个小飞机打砖块……”——这个思路本身就把门关死了。我带…...

5分钟掌握SVGnest:免费开源矢量嵌套工具,让材料切割效率提升80%

5分钟掌握SVGnest&#xff1a;免费开源矢量嵌套工具&#xff0c;让材料切割效率提升80% 【免费下载链接】SVGnest An open source vector nesting tool 项目地址: https://gitcode.com/gh_mirrors/sv/SVGnest SVGnest是一款完全免费且开源的自动嵌套应用程序&#xff0c…...

Java 求职面试:微服务架构与安全框架的探索

Java 求职面试&#xff1a;微服务架构与安全框架的探索 Java 求职面试&#xff1a;微服务架构与安全框架的探索在一次互联网大厂的面试中&#xff0c;燕双非&#xff0c;一个搞笑的程序员&#xff0c;迎来了他的挑战。他坐在面试官面前&#xff0c;心里忐忑不安&#xff0c;…...

【Gartner认证实践框架】:AI Agent客服上线前必须完成的12项合规性验证清单(含GDPR/等保2.0/金融信创适配)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI Agent客服的合规性验证战略定位 在金融、医疗、电信等强监管行业&#xff0c;AI Agent客服系统不仅需满足功能与体验目标&#xff0c;更须将合规性嵌入其设计、开发与运营全生命周期。合规性验证不是…...

当IP矩阵遇上GEO,中小企业如何实现“双轮驱动”?

流量入口正在从搜索框向对话栏迁徙&#xff0c;你的品牌是“被看见”还是“被信任”&#xff1f;一、一个正在发生的营销范式革命2026年的一个真实场景&#xff1a;当潜在客户向豆包或千问提问“哪家公司的XX服务比较好”时&#xff0c;AI给出的推荐列表里&#xff0c;你的品牌…...

Unity UGUI血条蓝条从零实现:Canvas层级、RectTransform锚点与FillAmount原理

1. 这不是“拖拽控件就完事”的UI课&#xff0c;而是让你真正理解UGUI底层逻辑的起点 很多人学Unity UI&#xff0c;上来就是打开Canvas、拖个Button、改个颜色、加个OnClick事件——看起来5分钟就能做出个界面&#xff0c;结果一到要做血条、要动态更新、要适配不同分辨率、要…...