学习Vue封装的过渡与动画总结

今天学习了Vue封装的过渡与动画,接下来说一下Vue是如何实现的,首先原生的方法是在style元素中给指定元素添加过渡的过渡或动画,但Vue就不需要直接获取到需要过渡或动画的元素,而是使用一个<transition>的标签来包裹住想要过渡或动画的元素,在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名,因为不直接获取元素所以想要指定元素,那么就需要给transtion标签配置一个name属性来指定(不配置默认是v),这时样式就可以通过name属性来确定是哪个样式需要过渡或动画,下面用一张图片来说一下语法的使用:

Enter这边元素进入的语法,v-enter代表元素进入的起点、v-enter-to代表元素进入的终点、v-enter-active代表着元素进入从起点到终点之间的这个过程,这个过程就是过渡动画。Leave这边元素离开的语法,v-leave代表的是离开的起点、v-leave-to代表的是离开的终点,v-leave-active代表元素离开从起点到终点的过程。如果<transition>标签配置了name属性,那么就用属性值来代替默认的v即可指定元素实现了,其他里面的动画参数和原来的css样式语法是一样的。如果想要多个元素(比如:列表)同时需要动画或过渡则需要一个新的标签<transition-group>来对元素进行包裹即可实现多个元素的同时动画效果。

Vue还允许我们借助引入第三方库来快速实现且好看动画效果,通过import引入之后具体的使用方法要看第三方库的使用说明。

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

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

相关文章

提供一些防扫描被封禁、防溯源工具

1► 介绍 SecScanC2可以创建P2P网络进行安全扫描和C2。该工具可以帮助安全研究人员更有效地进行渗透测试&#xff0c;防止扫描被封禁&#xff0c;保护自己免受溯源。 2► 工具特性 P2P&#xff1a;将大量互联网节点构建成P2P网络 防止扫描被封禁&#xff1a;随机或指定节点…

STM32CubeMX配置STM32G071UART+DMA收发数据(HAL库开发)

时钟配置HSI主频配置64M 配置好串口&#xff0c;选择异步模式 配置DMA TX,RX,选择循环模式。 NVIC中勾选使能中断 勾选生成独立的.c和h文件 配置好需要的开发环境并获取代码 串口重定向勾选Use Micro LIB main.c文件修改 增加头文件和串口重定向 #include <string.h&g…

linux安装MySQL5.7(安装、开机自启、定时备份)

一、安装步骤 我喜欢安装在/usr/local/mysql目录下 #切换目录 cd /usr/local/ #下载文件 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.38-linux-glibc2.12-x86_64.tar.gz #解压文件 tar -zxvf mysql-5.7.38-linux-glibc2.12-x86_64.tar.gz -C /usr/local …

MacOS环境下Kali Linux安装及使用指导

Kali Linux是一个开源的、基于Debian的Linux发行版&#xff0c;面向各种信息安全任务&#xff0c;如渗透测试、安全研究、计算机取证和逆向工程&#xff0c;是最先进的渗透测试发行版&#xff0c;它的前身是BackTrack。 1. 我们为什么要用Kali Linux 由于Kali Linux具有以下特…

redis夯实之路-键过期与发布订阅详解

设置键的生存时间或过期时间 Setex&#xff08;单位s&#xff09;&#xff0c;expire&#xff08;s&#xff09;&#xff0c;pexpire&#xff08;ms&#xff09;可以设置键的生存时间&#xff0c; Expirate&#xff0c;pexpirate设置键的过期时间&#xff08;timestamp的时间…

SqlAlchemy使用教程(一) 原理与环境搭建

一、SqlAlchemy 原理及环境搭建 SqlAlchemy是1个支持连接各种不同数据库的Python库&#xff0c;提供DBAPI与ORM&#xff08;object relation mapper&#xff09;两种方式使用数据库。 DBAPI方式&#xff0c;即使用SQL方式访问数据库 ORM, 对象关系模型&#xff0c;是用 Python…

c++学习笔记-STL案例-机房预约系统2-创建身份类

前言 衔接上一篇“c学习笔记-STL案例-机房预约系统1-准备工作”&#xff0c;本文主要包括&#xff1a;创建身份类&#xff0c;建立了整个系统的框架&#xff0c;Identity基类&#xff0c;派生类&#xff1a;Sudent、Teacher、Manager&#xff0c;基类无实现源文件&#xff0c;…

【Python】编程练习的解密与实战(四)

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《Python | 编程解码》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 目录 &#x1fa90;1. 初识Python &a…

HTML5 article标签,<time>...</time>标签和pubdate属性的运用

1、<article>...</article>标签的运用 article标签代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报竟杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件&#xff0c;或者其他任何独立的内容。把文章正文放在h…

PyTorch安装教程(Win10),含遇到的问题及解决办法

1. 环境准备 首先&#xff0c;打开PyTorch官网&#xff1a;https://pytorch.org/get-started/locally/ 向下可以看到有如下几个条件&#xff1a; Python&#xff1a;PyTorch仅支持Python3.x&#xff0c;不支持Python2.x&#xff1b; Package Manager&#xff1a; Anaconda&am…

TreesVariety

树木品种 - 树木和植物捆绑包。与“植被引擎”兼容的包装 通用和HDRP的树木包在这里 树木品种: ● 支持Unity Wind; ● 11种树木,7种植物; ● Unity树创建器树(可编辑); ● 与内置管道配合使用; ● 支持地形广告牌。 树木: ● 8棵桦树; ● 4块枫木; ● 8块橡木; ●…

【C】volatile 关键字

目录 volatile1&#xff09;基本概念2&#xff09;用途&#xff1a;禁止编译器优化3&#xff09;总结 volatile 1&#xff09;基本概念 const是C语言的一个关键字。 const用于告诉编译器相应的变量可能会在程序的控制之外被修改&#xff0c;因此编译器不应该对其进行优化。 …