vue3 transition动画

news2024/11/15 11:36:51

Vue 提供了 transition 的封装组件，通过它可以给任何元素和组件添加进入/离开过渡动画

一、vue怎么实现单组件/元素的过渡动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。------vue官网

vue的transition组件通过观察元素的DOM状态，来判断元素是插入还是移除

/*vue官方的例子*/
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    /*下面的v-if来操作DOM元素，从而vue是可以知道元素的插入和移除的*/
    <p v-if="show">hello</p>  
  </transition>
</div>

二、使用条件

满足以下条件之一

  1. 条件渲染 (使用 v-if)
  2. 条件展示 (使用 v-show)
  3. 动态组件
  4. 组件根节点

三、具体操作

1、过渡的类名

在这里插入图片描述

在进入/离开的过渡中，会有 6 个 class 切换。

  1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
  2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
  3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter
    被移除)，在过渡/动画完成之后移除。
  4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
  6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave
    被删除)，在过渡/动画完成之后移除。

vue2的写法：v-enter/v-leave
vue3的写法：v-enter-from/v-leave-from

在这里插入图片描述
vue将过渡动画分为了两个部分Enter（进入）和Leave（离开）

每个部分都是由起始和结束 两个节点 和 一个过渡阶段 组成的

这里我们先给出一个概念，我们把**Enter(进入)动画和Leave（移除）**动画中间的那个状态称为“原状态”。也就是元素不在动画时，常驻的那个状态

在这里插入图片描述

2、Enter（进入）过渡动画

v-enter(起始节点)

官网里还有特别强调说v-enter是在元素插入之前就生效了的，也就是确保了动画能从v-enter的地方开始过渡。且在元素插入的下一帧就移除了，这个是很关键的，说明v-enter只关注与动画的起始那个节点，一旦元素插入进来了，过渡动画开始跑了，就不归v-enter来管了。

打个比方，我们想要做一个从上面滑动进入的过渡动画，起始节点就可以设置v-enter里的属性top:-100%（这里我的是slide-enter而非v-enter是因为我在transition里定义了name属性）
在这里插入图片描述
在这里插入图片描述
v-enter里top:-100%就是相对于**“原状态”的位置，设置一个top值比“原状态”**更小的起始值，让元素一开始从更高的位置进入，来开始这段过渡动画。

从上面了解到，过渡动画的值是 相对于 **“原状态”**的值来设置

v-enter-active（过渡阶段）

v-enter-active用来定义过渡动画的过程，它拥有最长的持续时间，包括了整个**Enter(进入)**动画的持续时间。

同时我还发现一个特殊的情况，v-enter-active和v-enter都是可以定义过渡动画的起始节点的

在这里插入图片描述

像上面我们把v-enter的初始化节点写到v-enter-active里，并且把v-enter给注释掉，动画仍然能正常跑起来

在这里插入图片描述

这个时候又出现了一个问题，如果两个都写上了不同的top值呢？

答案就是后定义的会覆盖先定义的生效
在这里插入图片描述

v-enter-to（结束节点）

官网对它的描述是在元素被插入之后即刻生效，其实也可以理解成v-enter-to紧接在v-enter失效后就生效，（形象化的说，就是v-enter把接力棒传给了v-enter-to）v-enter-to本身的生效时间还是挺长的。因为v-enter只在很短的瞬间做了一个初始化的操作，就把接力棒传给v-enter-to了，然后v-enter-to一直持续到Enter（进入）动画的结束。

这里同样有一个和上面类似的现象，在v-enter-to和v-enter-active里面都是可以定义动画的过程。这同样也验证了v-enter-to的持续时间很长，相比v-enter-active只少了一个v-enter的持续时间。

像我们这里对Enter(进入)过渡动画只定义了起始节点v-enter和v-enter-to，把v-enter-active省略，

并且把transition：all .5s；写到了v-enter-to里，但是这里的transaction：all.5s;仍然能生效，就和写在v-enter-active是一样的效果。

在这里插入图片描述

常规的写法

我也贴出来放在这里：

常规的写法里就是v-enter设置初始点，v-enter-active设置整个过渡的过程，v-enter-to设置最后动画结束的节点(这里写的是top:0%;其实就是保持和“原状态”一致)

因为这里的v-enter-to和“原状态”一致，所以其实v-enter-to在这里是可以不用定义的

在这里插入图片描述
被隐藏的一段过程
像这里我们把v-enter-to设置成和“原状态”不一样的状态,看看动画的效果:
在这里插入图片描述

发现动画滑动进入到在v-enter-to的地方后就会直接闪回“原状态”的位置了

那么我们有没有可能让这个闪回的过程也变成过渡动画呢？

其实是可以实现的。我们直接把transition写到元素的最大的类里面。

在这里插入图片描述

动画是滑动进入到v-enter-to的位置，然后再滑动到“原状态”的位置

在这里插入图片描述

由此认为在v-enter-to 到“原状态”的过程，也是可以加上动画的一段过程，而非说v-enter-to就一定是进入动画的结尾。

总结

在这里我们小小的总结一下Enter(进入)过渡动画的过程，分为了三个部分，这三个部分并非“泾渭分明”，而是在功能上有一定的重叠，并且有时v-enter-to到“原状态”还是能有一段过渡动画的。

三、Leave（移除）过渡动画

我们在之前也有提到说Leave(移除)过渡动画中也是由v-leave v-leave-active
v-leave-to两个节点和一个过程组成。但是Enter(进入)和Leave(移除)还是有些不同

v-leave

v-leave应该是最特殊的一个了，我在代码中对v-leave进行定义，往往出现的情况就是定义的属性不生效或者导致整个**Leave（移除）动画都不生效了，并且很难在别人的帖子里看到对v-leave的使用。而且v-leave存在的意义也很奇怪，一个元素的移除不就都是得从“原状态”**开始吗，那么v-leave的意义在哪呢？

v-leave-active

v-leave-active和v-enter-active类似，就是定义过渡动画的过程

在这里插入图片描述

v-leave-to

v-leave-to用来定义过渡动画的结尾，需要注意的v-leave-to之后，元素就会直接消失，同时你也可以把transition写在v-leave-to里，和前面提到的v-enter-to的情况类似

在这里插入图片描述

总结

vue的过渡动画虽然被分为了两个很类似的部分，但是实际上还是按照流程（或者说是时间）来执行的。所以enter的部分和leave的部分还是有一些小不同，主要就是体现在v-leave上

原地址

：https://blog.csdn.net/qiaofuwufu/article/details/126788597

Vue的过渡

https://blog.csdn.net/qq_46149597/article/details/127720420?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167806990016800192296613%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=167806990016800192296613&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-1-127720420-null-null.142v73insert_down3,201v4add_ask,239v2insert_chatgpt&utm_term=vue%E8%BF%87%E5%BA%A6&spm=1018.2226.3001.4187

vue过度与动画transition使用

https://blog.csdn.net/guoyp2126/article/details/119566990?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_utm_term~default-1-119566990-blog-103014634.pc_relevant_default&spm=1001.2101.3001.4242.2&utm_relevant_index=4

CSS transition（过渡效果）详解

https://blog.csdn.net/qq_43923146/article/details/127510036
在这里插入图片描述

关于vue状态过渡transition不起作用的原因解决

在这里插入图片描述

vue中transition进场动画不生效，离开动画生效

https://blog.csdn.net/cherrylovedog/article/details/106932181

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/391319.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

全网最全整理，自动化测试10种场景处理（超详细）解决方案都在这......

全网最全整理，自动化测试10种场景处理（超详细）解决方案都在这......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 自动化工作流程 自动…
阅读更多...
三种让DIV标签中的P标签水平和垂直都居中方法

三种让DIV标签中的P标签水平和垂直都居中方法

效果如下图 红色1块是span&#xff0c;属于行内元素。 绿色2块和蓝色4块是p&#xff0c;属于块级元素。 黄色3块h3&#xff0c;属于块 都是块级元素方法是可以通用的 这里两个类别元素一起来展示主要是为了区别 1行内块元素水平居中垂直居中 行内元素和行内块元素水平居中…
阅读更多...
docker项目自动化部署脚本(认真排版、工作积累)

docker项目自动化部署脚本(认真排版、工作积累)

要解决什么问题&#xff1f; 把日益复杂化、工程化的开发环境&#xff0c;以及生产环境&#xff0c;变得简单&#xff0c;自动化部署。 达到什么效果&#xff1f; 环境处处一致&#xff0c;并且自动化部署&#xff0c;提升生产力&#xff0c;又快又好。 当您更换电脑、更换…
阅读更多...
Vue2.0开发之——购物车案例-Goods组件封装-修改商品的勾选状态(49)

Vue2.0开发之——购物车案例-Goods组件封装-修改商品的勾选状态(49)

一 概述 如何修改商品的勾选状态自定义state-change事件修改对应商品的勾选状态 二 如何修改商品的勾选状态 2.1 App.vue中data每个Item中goods_state的变化伴随商品勾选状态变化 2.2 Goods.vue中复选框的值是props属性 <inputtype"checkbox"class"custom…
阅读更多...
LeeCode：回文子串个数（动态规划）

LeeCode：回文子串个数（动态规划）

文章目录一、题目二、算法思路三、代码实现四、复杂度分析一、题目 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被视作不同的子串。 回文字符串 是正着读…
阅读更多...
二值图像骨架线提取

二值图像骨架线提取

二值图像骨架线提取HilditchThin算法Rosenfeld算法OpenCV_Contrib中的算法示例其他细化算法查表法HilditchThin的另一种算法参考二值图像骨架线提取算法&#xff1a;HilditchThin算法、Rosenfeld算法、OpenCV_Contrib中的算法 HilditchThin算法 1、使用的8邻域标记为&#xff…
阅读更多...
Java+ElasticSearch+Pytorch实现以图搜图

Java+ElasticSearch+Pytorch实现以图搜图

以图搜图&#xff0c;涉及两大功能&#xff1a;1、提取图像特征向量。2、相似向量检索。第一个功能我通过编写pytorch模型并在java端借助djl调用实现&#xff0c;第二个功能通过elasticsearch7.6.2的dense_vector、cosineSimilarity实现。一、准备模型创建demo.py&#xff0c;输…
阅读更多...
cuda2D FDTD——share

cuda2D FDTD——share

https://www.coder.work/article/30133 shared memory只能在block内共享&#xff0c;之间无法互相通信 对于2D TM波动方程计算&#xff0c;我们可以使用以下策略来处理共享内存的边界&#xff1a; 将全局内存中的数据复制到共享内存中时&#xff0c;除了将每个线程需要的数据…
阅读更多...
Python爬虫实践：优志愿 院校列表

Python爬虫实践：优志愿 院校列表

https://www.youzy.cn/tzy/search/colleges/collegeList获取目标网址等信息打开开发人员工具&#xff08;F12&#xff09;&#xff0c;拿到调用接口的地址&#xff0c;以及接口请求参数等信息&#xff0c;如下curl https://uwf7de983aad7a717eb.youzy.cn/youzy.dms.basiclib.ap…
阅读更多...
假如你知道这样的MySQL性能优化

假如你知道这样的MySQL性能优化

1. 为查询缓存优化你的查询 大多数的 MySQL 服务器都开启了查询缓存。这是提高性最有效的方法之 一&#xff0c;而且这是被 MySQL 的数据库引擎处理的。当有很多相同的查询被执行了多次的时候&#xff0c;这些查询结果会被放到一个缓存中&#xff0c;这样&#xff0c;后续的相同…
阅读更多...
Kogito -- 入门详解

Kogito -- 入门详解

Kogito -- 入门详解1. Introduction1.1 Version1.2 Introduction2.Environment Install2.1 JDK Install2.2 Maven Install&#xff08;3.8.6&#xff09;2.3 Idea2.4 VSCode3. Run Code3.1 Dependency3.2 Run3.3 Swagger4.Awakening4.1 Big Data -- Postgres5.Awakening5.1 Big…
阅读更多...
如何做一个高级的文本编辑器 textarea，拥有快捷键操作

如何做一个高级的文本编辑器 textarea，拥有快捷键操作

如何做一个高级的文本编辑器 textarea&#xff0c;拥有快捷键操作 最近想做一个高级点的 textarea &#xff0c;支持 JetBrains 系列软件的快捷键&#xff0c;比如&#xff1a; CTRL D 复制当前行。Tab 在前面插入 4 个空格。Shift Tab 删除行前的空格&#xff0c;多于4个&a…
阅读更多...
google独立站和与企业官网的区别是什么？

google独立站和与企业官网的区别是什么？

google独立站和与企业官网的区别是什么&#xff1f; 答案是&#xff1a;独立站通过谷歌SEO优化可以更好的获取自然排名的流量。 随着互联网的不断发展&#xff0c;企业越来越重视自身网站的建设和优化&#xff0c;而在企业网站建设中&#xff0c;很多人会犯一个常见的错误&am…
阅读更多...
模块、包和异常

模块、包和异常

目录1.模块import 导入from...import 导入2. 模块的搜索顺序3. __name__属性的使用4. 包包的使用步骤5. 发布模块6. 安装模块7. 卸载模块8. pip 安装第三方模块9. 异常处理异常捕获异常的传递抛出 raise 异常1.模块 模块是 Python 程序架构的一个核心概念 每一个以扩展名 py …
阅读更多...
LPDDR4x 的 学习总结（4） - SDRAM chip的组织结构

LPDDR4x 的 学习总结（4） - SDRAM chip的组织结构

上节总结cell的结构和基本操作 本节基于cell组合起来的DRAM组织结构 DDR Device 的组织结构 Cells 以特定的方式组成 Column/Row/Bank/Chip/Rank/DIMM/Channel等多层级组织结构如下图&#xff1a; 图1 - DRAM的组织结构 图2 - DRAM容量的组织结构图 Channel: 同1个DDR控制器 …
阅读更多...
GIT基础常用命令-1 GIT基础篇

GIT基础常用命令-1 GIT基础篇

git基础常用命令-1 GIT基础篇1.git简介及配置1.1 git简介1.2 git配置config1.2.1 查看配置git config1.2.2 配置设置1.2.3 获取帮助git help2 GIT基础常用命令2.1 获取镜像仓库2.1.1 git init2.1.2 git clone2.2 本地仓库常用命令2.2.1 git status2.2.2 git add2.2.3 git diff2…
阅读更多...
seata1.5.2使用从零快速上手(提供代码与安装包)

seata1.5.2使用从零快速上手(提供代码与安装包)

1.软件准备&#xff1a; 1.1 seata1.5.2 官网下载&#xff1a;地址:http://seata.io/zh-cn/ server源码:https://github.com/seata/seata 百度云下载&#xff08;建议&#xff09;: 百度下载 链接&#xff1a;https://pan.baidu.com/s/1eilbSI0YdmupHYI7FroTsw 提取码&…
阅读更多...
【编程基础之Python】10、Python中的运算符

【编程基础之Python】10、Python中的运算符

【编程基础之Python】10、Python中的运算符Python中的运算符算术运算符赋值运算符比较运算符逻辑运算符位运算符成员运算符身份运算符运算符优先级运算符总结Python中的运算符 Python是一门非常流行的编程语言&#xff0c;它支持各种运算符来执行各种操作。这篇文章将详细介绍…
阅读更多...
构造有向无环图（拓扑排序）

构造有向无环图（拓扑排序）

蓝桥杯集训每日一题 acwing3696 给定一个由 n 个点和 m 条边构成的图。 不保证给定的图是连通的。 图中的一部分边的方向已经确定&#xff0c;你不能改变它们的方向。 剩下的边还未确定方向&#xff0c;你需要为每一条还未确定方向的边指定方向。 你需要保证在确定所有边的…
阅读更多...
独家揭秘：站外引流的十大技巧！

独家揭秘：站外引流的十大技巧！

在今天的互联网时代&#xff0c;如何有效地引流已成为网站运营者面临的一个重要问题。 站外引流是指通过在其他网站或平台上建立链接或发布内容&#xff0c;将流量引导到自己的网站&#xff0c;提高自己网站的访问量。 本文将为大家揭秘站外引流的十大技巧&#xff0c;帮助大…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023