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

开源多人游戏解决方案:Nucleus Co-op让单机游戏秒变多人派对

开源多人游戏解决方案&#xff1a;Nucleus Co-op让单机游戏秒变多人派对 【免费下载链接】splitscreenme-nucleus Nucleus Co-op is an application that starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirro…...

MATLAB代码:考虑绿证交易与综合需求响应的综合能源系统优化调度“注意:引号内文字为返回的标题

MATLAB代码&#xff1a;计及绿证交易和综合需求响应的综合能源系统优化调度 关键词&#xff1a;绿证交易 综合需求响应 综合能源系统 优化调度 仿真平台: matlabyalmipcplex 主要内容&#xff1a;代码针对综合能源系统低碳运行和源荷互动&#xff0c;考虑可再生能源电力消纳责…...

告别Dijkstra的无力感:手把手教你用Bellman-Ford算法搞定带负权边的图(附C++代码与避坑指南)

突破Dijkstra的局限&#xff1a;Bellman-Ford算法在负权图中的应用实战 当我们需要在图中寻找最短路径时&#xff0c;Dijkstra算法通常是首选工具。然而&#xff0c;当图中存在负权边时&#xff0c;这个经典算法就会失效。想象一下网络路由中某些链路可能提供奖励积分&#xf…...

OpenClaw安全防护:千问3.5-9B操作权限最佳实践

OpenClaw安全防护&#xff1a;千问3.5-9B操作权限最佳实践 1. 为什么需要关注OpenClaw的安全配置 去年冬天的一个深夜&#xff0c;我被一阵急促的键盘敲击声惊醒。走进书房时&#xff0c;发现OpenClaw正在疯狂删除我的项目文件夹——原来是我白天测试时忘记限制文件删除权限&…...

突破安卓截图封锁:Xposed-Disable-FLAG_SECURE技术探秘与实战指南

突破安卓截图封锁&#xff1a;Xposed-Disable-FLAG_SECURE技术探秘与实战指南 【免费下载链接】Xposed-Disable-FLAG_SECURE Xposed Module to Disable FLAG_SECURE, enabling screenshots, screen sharing and recording in apps that normally wouldnt allow it. 项目地址:…...

Bottlerocket容器健康检查终极指南:自定义探针与系统指标深度集成

Bottlerocket容器健康检查终极指南&#xff1a;自定义探针与系统指标深度集成 【免费下载链接】bottlerocket An operating system designed for hosting containers 项目地址: https://gitcode.com/gh_mirrors/bo/bottlerocket Bottlerocket是一款专为容器化工作负载设…...

告别‘Setup is running...’卡死!保姆级PowerBuilder 9.0安装避坑指南(附安全模式备用方案)

PowerBuilder 9.0安装全攻略&#xff1a;从卡死困境到流畅部署的终极解决方案 如果你曾经在安装PowerBuilder 9.0时遭遇过"Setup is running..."的无限卡死&#xff0c;那么这篇文章就是为你量身定制的救星。作为一款经典的企业级开发工具&#xff0c;PowerBuilder至…...

Qwen3-ASR-0.6B高性能优化:CNN加速语音特征提取

Qwen3-ASR-0.6B高性能优化&#xff1a;CNN加速语音特征提取 语音识别技术正在快速融入我们的日常生活&#xff0c;从智能助手到实时字幕&#xff0c;都离不开高效的语音转文本能力。Qwen3-ASR-0.6B作为一款轻量级语音识别模型&#xff0c;在保证识别准确率的同时&#xff0c;更…...

DedeCMS文件包含漏洞深度剖析:为什么一个‘无害’的txt文件能让你getshell?

DedeCMS文件包含漏洞技术解析&#xff1a;从文本文件到系统沦陷的连锁反应 在内容管理系统&#xff08;CMS&#xff09;的安全领域&#xff0c;最危险的漏洞往往藏匿于最平凡的功能之中。DedeCMS作为国内广泛使用的开源CMS&#xff0c;其文件包含漏洞&#xff08;CVE-2023-2928…...

DeepSeek LeetCode 1210. 穿过迷宫的最少移动次数 public int minimumMoves(int[][] grid)

我来分析 LeetCode 1210 “穿过迷宫的最少移动次数” 的解题思路和实现。 问题分析 我们有一条长度为 2 的蛇&#xff0c;需要从起点 (0,0) 和 (0,1)&#xff08;水平放置&#xff09;移动到终点 (n-1, n-2) 和 (n-1, n-1)&#xff08;仍为水平放置&#xff09;。蛇可以&#x…...