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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

mq安装新版-3.13.7的安装

一、下载包&#xff0c;上传到服务器 https://github.com/rabbitmq/rabbitmq-server/releases/download/v3.13.7/rabbitmq-server-generic-unix-3.13.7.tar.xz 二、 erlang直接安装 rpm -ivh erlang-26.2.4-1.el8.x86_64.rpm不需要配置环境变量&#xff0c;直接就安装了。 erl…...

可视化图解算法48:有效括号序列

牛客网 面试笔试 TOP101 | LeetCode 20. 有效的括号 1. 题目 描述 给出一个仅包含字符(,),{,},[和],的字符串&#xff0c;判断给出的字符串是否是合法的括号序列 括号必须以正确的顺序关闭&#xff0c;"()"和"()[]{}"都是合法的括号序列&…...