当前位置: 首页 > 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…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献

Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍 以下是对这段英文内容的中文翻译&#xff1a; ### 胃肠道癌症的发病率呈上升趋势&#xff0c;且有年轻化倾向&#xff08;Bray等人&#xff0c;2018&#x…...

算法250609 高精度

加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...

Selenium 查找页面元素的方式

Selenium 查找页面元素的方式 Selenium 提供了多种方法来查找网页中的元素&#xff0c;以下是主要的定位方式&#xff1a; 基本定位方式 通过ID定位 driver.find_element(By.ID, "element_id")通过Name定位 driver.find_element(By.NAME, "element_name"…...

LINUX编译vlc

下载 VideoLAN / VLC GitLab 选择最新的发布版本 准备 sudo apt install -y xcb bison sudo apt install -y autopoint sudo apt install -y autoconf automake libtool编译ffmpeg LINUX FFMPEG编译汇总&#xff08;最简化&#xff09;_底部的附件列表中】: ffmpeg - lzip…...