【vue】实现组件的动画过渡效果_DQdandan的博客-程序员宅基地

技术标签: vue  

【vue】实现组件的动画过渡效果

transition 包裹

如果想通过v-if或v-show添加或移除某个组件时实现过渡效果,可以用 <transition>组件将其包裹住。

<transition>
<h1 v-show="show">hello,tansition!</h1>
</transition>

transition 包含的阶段

transition将过渡效果划分为几个过程,这些过程可作为动画效果实施的选择器。

进入阶段:
v-enter-active:整个过渡状态过程
v-enter:开始进入过渡状态的时刻
v-enter-to:结束过渡状态的时刻
离开阶段:
v-leave-active:整个过渡状态过程
v-leave:开始进入过渡状态的时刻
v-leave-to:结束过渡状态的时刻

在这里插入图片描述

transition 相关的css 选择器

元素名.阶段名
元素name属性-阶段名

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jiangyaoyujian/article/details/105605634

智能推荐

js获取屏幕、浏览器、页面的高度宽度_星繁~的博客-程序员宅基地_js获取浏览器的宽度和高度

本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。一、介绍1. 容器一个页面的展示,从外到内的容器为:屏幕、浏览器以及页面本身。HTML元素展现在页面内,页面展现在浏览器内,而浏览器展现在屏幕内。通过Js的一些对象可以获取这些容器的高度、宽度。2. 物理尺寸和分辨率容器的尺寸是指当前分辨率下的高度、宽度,而不是物理高度、宽度。如:一个22寸的显示器,屏幕分辨率为1366 * 768,那么获取到的屏幕高度为1366px,宽度为768px。3. 展示图注意:图中的body根

python中哪些是无序_Python中的无序位_英伦百宝箱的博客-程序员宅基地

作为Python的初学者,我认为创建一个超出我技能范围的项目来了解这种语言是很好的。不幸的是,这个项目中最困难的部分涉及到移动位,这是另一个挑战,因为我发现很难把我的头围绕在比特上。我知道每个接线员都在做什么,我只是觉得很难让它做我想做的事。在很明显我失败了,所以这个问题。在我试图通过使用预定义的索引列表更改位顺序来加密字符串。我以为我做得很好,但它不起作用,我不知道为什么。在即使我的代码可以完成...

第一阶段项目感受——漫漫代码路,与君共勉_u011886490的博客-程序员宅基地

真是土掉渣的文章标题,不过想了半天,也只剩下这个标题了…… 谈到第一个项目,不自觉的就想到自己来兄弟连的初衷,本人是广告学专业出身,于是毕业后就顺理成章的从事媒体代理这类的工作,因为工作的第一家公司是一个外企,而且规模也不小,在行业内也算有点名气,当时也很有雄心壮志的要把这份工作做好,抱着这个想法坚持了一年半,不过事与愿违,渐渐发现自己的兴趣竟然不在广告这一块,反而对计算机啊、编程啊、帮

锁定计算机按键精灵运行,最新按键精灵脚本代码大全 按键精灵命令运行方法..._英论阁Enago科研作者服务的博客-程序员宅基地

按键精灵脚本代码命令运行大全。按键精灵的鼠标动作录制是一项非常好用的功能,但因为鼠标点击的地方是固定死板的,且延迟时间无法调整,如果在后台脚本中添加一些专用代码,就可以调整点击频率和点击时间,甚至可以在安卓模拟器上使用模拟按压式点击,当然,这只是冰山一角,创造脚本为专业连续作业做准备才好玩呢!按键精灵下载地址:软件名称:按键精灵 v2014.06.19496 官方中文正式安装版软件大小:22.8M...

Spring Cloud——优雅的Feign_一心同学的博客-程序员宅基地

通俗易懂的讲解Spring Cloud中的组件Feign,包括概念的讲解,如何使用,以及实现负载均衡!

AxonFramework,分发事件_勇赴的博客-程序员宅基地

在某些情况下,有必要发布事件到外部系统,比如消息broker。Spring AMQPAxon提供了开箱即用的支持从一个AMQP message broker中转递事件和传递事件到broker中,比如Rabbit MQ。将事件转发到AMQP EchangeSpringAMQPPublisher将事件转发给一个AMQP Exchange。

随便推点

IOS UILabel 根据内容自适应高度_weixin_30340353的博客-程序员宅基地

iOS Label 自适应高度 适配iOS7以后的版本更多 self.contentLabelView = [[UILabel alloc] init]; self.contentLabelView.font = SYS_FONT(15); self.contentLabelView.lineBreakMode =NSLin...

HDOJ---1846 Brave Game[巴什博弈]_weixin_30733003的博客-程序员宅基地

Brave GameTime Limit: 1000/1000 MS (Java/Others)Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 3158Accepted Submission(s): 2092Problem Description十年前读大学的时候,中国每年都要从国外引...

转帖:HttpStatusCode状态说明C#版_weixin_34167819的博客-程序员宅基地

Continue 等效于 HTTP 状态 100。Continue 指示客户端可能继续其请求。SwitchingProtocols 等效于 HTTP 状态 101。SwitchingProtocols 指示正在更改协议版本或协议。OK 等效于 HTTP 状态 200。OK 指示请求成功,且请求的信息包含在响应中。这是最常接收的状态代码。Created 等效于 HTTP 状态 201。C...

Java中的String,StringBuilder,StringBuffer三者的方法及关系_满招损的博客-程序员宅基地

    java中String的常用方法1.String的常用方法封装一个 char[] 数组的对象不可变字符串的加号连接,效率低1.charAt(int index)  获得指定下标字符 public static void main(String[] args) { System.out.println(&quot;输入回文:&quot;); ...

扩展运算符及其在vuex的辅助函数里的应用详解_weixin_33937499的博客-程序员宅基地

一、扩展运算符  &lt;1&gt;为什么扩展运算符会诞生? 因为箭头函数没有arguments,所以才有了扩展运算符 &lt;2&gt;在箭头函数里面是没有arguments,但是在普通函数里是有的。 当形参数量不固定时,用arguments进行接收,而箭头函数里面没有,该如何接收?这时候就要用扩展运算符...

RF-SIM卡的多应用COS研究与设计_benben_liu2012的博客-程序员宅基地

1 前言     随着芯片技术的发展以及运营商之间的业务扩展,手机智能卡将会突破个人身份识别的单应用平台向多应用平台方向发展,特别是移动支付平台。如今芯片生产商已经开发出了支持2.4 GHz频率的RF-SIM 卡,它是接触式智能卡与非接触式智能卡的结合,在设计上,接触式界面遵守ISO7816 接口标准,非接触式界面采用2.4G ISM频段进行通信。在硬件实现上,RF-SIM 卡有三芯片、双