详解Vue中添加过渡效果
作者：kevin.l 发布时间：2024-04-27 16:04:29
标签：vue,过渡
最近在学习Vue这个框架，发现新的版本中，官网的文档里面说的过渡效果，如果直接粘贴官方的例子中的代码，发现并没有过渡的效果，经过反复测试之后终于知道怎么搞了，把测试的过程总结一下，以便以后回顾。
贴上成功的代码：
html:
<div v-if="show" :transition="expand">hello</div>
//或者
<div v-if="show" v-bind:transition="expand">hello</div>
css:
/* 必需 */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
js:
new Vue({
el: '#app',
data: {
show: false,
transitionName: 'expand'
}
})
效果如下：
来源：http://www.cnblogs.com/kevin1220/p/5689868.html
0
投稿猜你喜欢
- HTTP（HyperTextTransferProtocol）是超文本传输协议的缩写，它用于传送WWW方式的数据，关于HTTP协议的详细内容
- 本文介绍了jquery在vue脚手架中的使用方式示例，分享给大家，具体如下：1：在各个vue文件中使用<script>impor
本文实例讲述了Python3中函数参数传递方式。分享给大家供大家参考，具体如下：之前在看北理工嵩天等老师的python3的课程，在第五周中老- 首先交代一下运行环境和工具版本：WIN10MINGW64ORACLEINSTANCCLIENT_18_3 x64Jetbrins Golan
- argparse是python标准库里面用来处理命令行参数的库命令行参数分为位置参数和选项参数：位置参数就是程序根据该参数出现的位置来确定的
- 1、说明curses提供了内置颜色可以让我们自定义前后背景。在使用彩色模式之前我们需要先使用使用curses.start_corlor()进
- 1.导入模块import cv2 as cvimport numpy as np 2.OpenCV绘图大致步骤OpenCV 图形绘制步骤（1
- 背景：在自动化化测试过程中，不方便准确获取页面的元素，或者在重构过程中方法修改造成元素层级改变，因此通过设置id准备定位。一、python准
- 假如你正在运行使用MySQL的Web应用程序，那么你把密码或者其他敏感信息保存在应用程序里的机会就很大。保护这些数据免受黑客或者窥探者的获取
- (1)二进制数据类型 二进制数据包括 Binary、Varbinary 和 ImageBinary 数据类型既可以是固定长度的(Binary
- 制作一个查看器可以查看豆瓣前100名电影的信息，当然这个爬取信息比较简单。所以重点放在 QThread 多线程的应用上面。QThread 子
- SQLite Delete详解SQLite 的 DELETE 查询用于删除表中已有的记录。可以使用带有 WHERE 子句的 DELETE 查
- 以下面这个例子作为教程，实现功能是element-wise add；（pytorch中想调用cuda模块，还是用另外使用C编写接口脚本）第一
- 像这种不能创建一个.frm 文件的报错好像暗示着操作系统的文件的权限错误或者其它原因，但实际上，这些都不是的，事实上，这个mysql报错已经
- 浅谈NumPy中的维度AxisNumPy中的维度是一个很重要的概念，很多函数的参数都需要给定维度Axis，如何直观的理解维度呢？我们首先以二
- 近期安装了python后，发现使用pycharm工具打开代码后发现代码下边会有波浪线的显示；但是该代码语句确实没有错误，通过查询发现了两种方
- 先看一下最简单的例子，在test中，添加一个字段，字段名为birth，类型为date类型。mysql> alter table tes
- 这篇文章主要介绍了Python箱型图绘制与特征值获取过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需
- 什么是Three.js？ 如果你正在读这篇文章，你可能对Three.js有一定的了解，那我们来简单地介绍下Three.js是什么.Three
- 本文实例讲述了Android基于TCP和URL协议的网络编程。分享给大家供大家参考，具体如下：手机本身是作为手机终端使用的，因此它的计算能力
