Vue中添加过渡效果
2024-08-31 05:30:01
最近在学习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'
}
})
最新文章
- HTML/CS3相关面试题目
- Tomcat安装配置
- 从高处理解android与服务器交互(看懂了做开发就会非常的容易)
- bzoj 2561: 最小生成树
- vaddin使用技巧
- HTML用法小摘录
- Java中直接输出一个类的对象
- QWidget使用qss样式的background-image属性
- Hdu1092
- WINDOWS java 不能正常卸载 问题, (其他系统问题 也可以试试)
- mysql [assword expired
- 设计模式--桥接(Bridge)模式
- sublime Text3基本配置记录+python
- Objective-C优缺点
- 个人阅读作业2:结合《No Silver Bullet》谈谈我在软件开发过程的遇到的困难与体会
- 【转】利用virtualenv管理Python环境
- 关于pcie的备忘
- angularJS中$apply()方法详解
- C++模式学习------策略模式
- SDWebImage从缓存中获取图片
热门文章
- 如何利用MATLAB并行计算缩短程序运行时间
- 部署和调优 2.3 tomcat中JDK安装
- maven手动安装oracle驱动到仓库
- JAVA基础知识总结6(面向对象特征之一:多态)
- tornado带签名的cookie原理
- 在页面所有元素加载完成之后执行某个js函数
- Windows版本Apache+php的Xhprof应用__[2]
- __tostring和__invoke 方法
- 36-图像有用区(dfs, bfs)
- 51NOD1835 完全图