过渡与动画

单元素/组件过渡

Vue在插入、更新或者移除 DOM 时,提供多种不同方式的过渡效果(一个淡入淡出的效果)

在条件渲染(使用v-if)、条件展示(使用v-show)、动态组件、组件根节点等情形中,可以给任何元素和组件添加进入/离开过渡

Vue提供了内置的过渡封装组件<transition>,该组件用于包裹要实现过渡效果的组件

语法如下:

<transition name = "过渡名称">         

        <!--要实现过渡效果的组件-->

</transition>

class过渡 

过渡效果分为两部分:进入和离开,在进入/离开的过渡中,有6个class切换

1. v-enter-from 定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

2. v-enter-active 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间、延迟和曲线函数。

3. v-enter-to 定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时 v-venter-from 被移除),在过渡/动画完成之后移除。 

4. v-leave-from 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。 5. v-leave-active 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间、延迟和曲线函数。

6. v-leave-to 定义过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 vleave-from 被删除),在过渡/动画完成之后移除。

css过渡

常用的过渡一般都是CSS过渡

CSS过渡,顾名思义也就是使用过渡class定义CSS实现过渡效果

css动画 

CSS动画与CSS过渡用法相同

区别是在动画中v-enter类名在节点插入DOM后不会立即被删除,而是在animationend(动画结束)事件触发时删除 

同时使用过渡和动画

在一些应用场景中,需要给一个元素同时设置过渡和动画,比如 animation 很快的被触发并完成,而 transition 效果还没结束。这时,需要使用 type属性并设置 animation 或 transition值来明确声明需要Vue监听的类型。

<transition> 组件的 duration prop上可显性定义过渡持续时间(以毫秒计)

比如,定制进入和移出的持续时间:

<transition :duration="{ enter:1000, leave: 2000 }">...</transition>

还可以通过appear属性设置DOM节点在初始渲染的过渡(页面加载的初次过渡动画):<transition appear>...</transition>

JavaScript 钩子方法 

多元素/组件过渡

对于原生元素可以使用v-if/v-else实现多元素过渡。

最常见的多元素过渡是一个列表和描述这个列表为空消息的元素:

<transition>     

        <table v-if="items.length > 0">     

                <!-- ... -->     

        </table>     

        <p v-else>没有列表内容</p>

</transition>

实际上,通过使用多个v-if或将单个元素绑定到一个动态属性上,可以在任意数量的元素之间进行过渡。

可以使用多组件过渡将多个组件包装成动态组件的效果 

列表过渡

对于列表元素,可使用<transition-group>组件进行过渡。

<transition-group>组件具有以下几个特点:

1、不同于 <transition>组件,它默认以<span>元素渲染。

2、过渡模式不可用,因为不再相互切换特有的元素。

3、内部元素需要提供唯一的key属性值。

4、CSS过渡类将会应用在组件内部的元素中,而不是组件本身。

<transition-group> 组件不仅可以进入和离开列表过渡,还可以通过v-move特性改变定位,进行平滑过渡。

v-move特性像之前的类名一样,可以通过name属性来自定义前缀 

利用move属性,进行变换过渡,即一个列表中的列表项既不增加也不减少,只是不断地变换其位置 

FLIP动画不仅可以实现单列表过渡,多维网格列表的过渡也同样简单  

总结 

Vue的过渡与动画,主要用到transition组件,该组件一般搭配v-if、v-show、动态组件、组件根节点来使用。

对列表进行过渡渲染时,不能再使用transition,必须使用transition-group组件包裹。如果需要实现列表进入时的动画,可以给transition-group添加appear属性即可。

在Vue中,元素过渡的流程是:

1、将要过渡的元素放入transition组件中。可以写多个transition组件,如果没有定义名称,在写6个class时,那么v-开头的class可以控制所有的过渡,如果给了名称,那么只能控制与名称对应的过渡。

2、通过vue实现对transition中的元素进行插入或删除操作。

3、在对应的6个class中写CSS代码,实现在插入或删除完成前过渡效果。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python算法题

需求 代码 class Solution:def searchInsert(self, nums: List[int], target: int) -> int:if max(nums) >target:for i in range(len(nums)-1):if nums[i1] > target and nums[i] <target:return i1if max(nums) <target:return len(nums)if min(nums) > …

操作系统(2)——进程线程

目录 小程一言专栏链接: [link](http://t.csdnimg.cn/8MJA9)基础概念线程详解进程详解进程间通信调度常用调度算法 重要问题哲学家进餐问题问题的描述策略 读者-写者问题问题的描述两种情况策略 总结进程线程一句话 小程一言 本操作系统专栏&#xff0c;是小程在学操作系统的过…

【tcl脚本实践Demo 1】文本生成、匹配、修改、读写

引言 在芯片设计的流程中,各种EDA工具在设计、综合、布局布线、验证、时序分析等等环节都会产出大量的文件信息。这些信息是海量的,如果单纯靠程序员自己查看信息效率很低并且很容易纰漏。所以脚本语言可以很好的解决这个问题,可以利用脚本语言匹配到敏感的信息,完成对信息…

let 和 const 区别

在JavaScript中&#xff0c;let 和 const 是两种用于声明变量的关键字&#xff0c;它们都是ES6&#xff08;ECMAScript 2015&#xff09;引入的新特性&#xff0c;旨在改进变量声明的方式&#xff0c;与传统的 var 关键字相比&#xff0c;提供了更清晰的变量作用域管理和更好的…

用VHDX的方式安装Windows系统

最近尝试了用VHDX的方式安装Windows系统&#xff0c;以下为测试操作的过程。 1.创建并附加虚拟硬盘 推荐使用图形界面操作&#xff0c;磁盘管理—操作—创建 VHD&#xff0c;选择虚拟硬盘位置&#xff0c;一般放在系统盘之外。虚拟硬盘格式建议选择 VHDX&#xff0c;虚拟硬盘类…

240 基于matlab的飞行轨迹仿真程序

基于matlab的飞行轨迹仿真程序&#xff0c;多种不同的飞行轨迹&#xff0c;输出经度、纬度、高度三维轨迹&#xff0c;三个方向的飞行速度。程序已调通&#xff0c;可直接运行。 240 飞行轨迹仿真 三维轨迹 飞行速度 - 小红书 (xiaohongshu.com)

限流的学习

限流算法&#xff1a; 滑动窗口算法 滑动日志算法 漏桶算法 令牌桶算法 redis分布式限流 1、固定窗口限流 固定窗口算法又叫计数器算法&#xff0c;是一种简单方便的限流算法。主要通过一个支持原子操作的计数器来累计 1 秒内的请求次数&#xff0c;当 1 秒内计数达到限流阈值…

C#知识|面向对象编程中实例方法的封装与应用总结

哈喽,你好,我是雷工! 本节学习面向对象编程中实例方法的封装与应用,以下为学习笔记。 01 方法定义 访问修饰符 返回值类型 方法名(参数1,参数2……) {//此处编写方法的主要内容,功能实现的具体过程 return 返回值;//如果方法有返回值需要此语句,如果没有返回值,那…

Golang图片验证码的使用

一、背景 最近在使用到Golang进行原生开发&#xff0c;注册和登录页面都涉及到图片验证码的功能。找了下第三方库的一些实现&#xff0c;发现了这个库用得还是蛮多的。并且支持很多类型的验证方式&#xff0c;例如支持数字类型、字母类型、音频验证码、中文验证码等等。 项目地…

深入理解MySQL中的Undo日志

在MySQL中&#xff0c;Undo日志是一个核心组件&#xff0c;尤其在使用InnoDB存储引擎时。它对保持数据库一致性、支持事务回滚、以及多版本并发控制&#xff08;MVCC&#xff09;等功能至关重要。本文将详细介绍Undo日志的基本知识、工作原理、作用以及如何管理它。 1. Undo日…

动态规划-回文子串问题

文章目录 1. 回文子串&#xff08;647&#xff09;2. 最长回文子串&#xff08;5&#xff09;3. 分割回文串 IV&#xff08;1745&#xff09;4. 分割回文串 II&#xff08;132&#xff09;5. 最长回文子序列&#xff08;516&#xff09;6. 让字符串成为回文串的最少插入次数&am…

Vue入门篇:样式冲突scoped,data函数,组件通信,prop data单向数据流,打包发布

这里写目录标题 1.组件的样式冲突scoped2.data函数3.组件通信1.两种组件关系分类和对应的组件通信方案2.父子通信方案的核心流程 4.prop & data、单向数据流5.打包发布6.打包优化:路由懒加载 1.组件的样式冲突scoped 默认情况:写在组件中的样式会全局生效→因此很容易造成多…

【Python从入门到进阶】53、Scrapy日志信息及日志级别

接上篇《52、CrawlSpider链接提取器的使用》 上一篇我们学习了基于规则进行跟踪和自动爬取网页数据的“特殊爬虫”CrawlSpider。本篇我们来学习Scrapy的日志信息及日志级别。 一、引言 1、日志在Scrapy中的重要性 在Scrapy框架中&#xff0c;日志扮演着至关重要的角色。日志…

十三、大模型项目部署与交付

1 硬件选型 CUDA 核心和 Tensor 核心 CUDA 核心&#xff1a;是NVIDIA开发的并行计算平台和编程模型&#xff0c;用于GPU上的能用计算&#xff0c;可做很多的工作。应用在游戏、图形渲染、天气预测和电影特效Tensor 核心&#xff1a;张量核心&#xff0c;专门设计用于深度学习…

前端开发框架Vue

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Vue概述 Vue.js&#xff08;简称Vue&#xff09;是由尤雨溪&#xff08;Evan You&#xff09;创建并维护的一款开源前端开发框架。Vue以其轻量级、易上手和高度灵活的特点&…

IoTDB 入门教程③——基于Linux系统快速安装启动和上手

文章目录 一、前文二、下载三、解压四、上传五、启动六、执行七、停止八、参考 一、前文 IoTDB入门教程——导读 二、下载 下载二进制可运行程序&#xff1a;https://dlcdn.apache.org/iotdb/1.3.1/apache-iotdb-1.3.1-all-bin.zip 历史版本下载&#xff1a;https://archive.…

YOLOv3模型在不同硬件平台上的性能表现有何差异?

YOLOv3模型在不同硬件平台上的性能表现可能会有显著差异&#xff0c;这主要受到以下因素的影响&#xff1a; 1. 计算能力&#xff1a;高性能的GPU&#xff08;如NVIDIA的高端系列&#xff09;或ASIC&#xff08;如Google的TPU&#xff09;可以更快地处理复杂的神经网络运算&am…

C——双向链表

一.链表的概念及结构 链表是一种物理存储单元上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。什么意思呢&#xff1f;意思就是链表在物理结构上不一定是连续的&#xff0c;但在逻辑结构上一定是连续的。链表是由一个一个的节点连…

24五一杯ABC题完整思路+可执行代码+可视化图表(1)

2024五一赛A题保姆级建模思路20页1-3问可执行代码后续成品论文各类可视化图表&#xff08;完整版资料在文章最后&#xff09; 处理第一问的代码 其余各题的代码如下&#xff1a; A题保姆级建模思路20页&#xff1a;&#xff08;手把手教你如何建模&#xff09; 高清图片如下&am…

Windows bat读取每行第一、二、三列的内容

1.场景: 使用Windows bat实现读取每行第一、二、三列的类内容,并输出到屏幕 2.实现: bat脚本 ::关闭命令回显 @echo off::日志目录创建 if not exist "C:\BPPMStatus_Check\%date:~0,4%%date:~5,2%%date:~8,2%" (md "C:\BPPMStatus_Check\%date:~0,4%%da…