在VUE中遇到了一个过渡问题
来源:互联网 发布:天猫数据直播间 编辑:程序博客网 时间:2024/06/06 03:49
问题描述:当给组件添加过渡效果时,opacity可以正常enter/leave,但是height只有enter的时候有效果,leave的时候height直接变成了0,没有过渡效果。
贴出代码:
.fadeStyle-enter-active, .fadeStyle-leave-active{
transition:all 1s ease;
}
.fadeStyle-enter,.fadeStyle-leave-active{
height:0;
opacity:0;
}
按照官网的教程,自然而然的把 .fadeStyle-enter-active, .fadeStyle-leave-active放在了一起,后来发现.fadeStyle-enter-active,.fadeStyle-leave-active并不能直接放在一块,里面一些属性是不一样的,所以分开写,并把.fadeStyle-enter,.fadeStyle-leave-active也分开来写,这样过程更清晰,并且将height换成了max-height,并且需要把带transition的代码放在所有过渡代码的最前面。贴出代码:
.fadeStyle-enter-active{
transition:all .5s ease;
height:100px;
}
.fadeStyle-leave-active{
transition:all .5s ease;
height:0;
opacity: 0;
}
.fadeStyle-leave{
opacity: 1;
height:100px;
}
.fadeStyle-enter{
opacity:0;
height: 0;
}
在发布了2.1.8版本之后,又添加了两个过渡类名(v-enter-to, v-leave-to),现在就更需要搞清楚这六个类名分别代表什么样的状态,本人还是建议将这个六个类名按照顺序分开来写。 1 0
- 在VUE中遇到了一个过渡问题
- 记vue.js学习中遇到的一个问题-1
- 写C++代码遇到的一个问题,错误已经在代码中注释了
- 遇到一个怪问题,在网上找到了答案,嘿嘿
- Vue-validator安装中遇到的问题
- vue-cli中遇到的问题【1】
- vue开发中遇到的问题
- vue中上传文件遇到的问题
- 关于在我开发中遇到了toolbar问题总结
- 遇到一个郁闷问题,最后在郁闷中解决!
- 在MFC中使用OCX控件遇到的一个问题
- 在C中遇到的一个问题 很彪悍
- 在CSS中遇到的一个小问题
- 在 CakePHP 中使用 SimpleExcel 遇到的一个问题小记
- 关于NavigationView在使用中遇到的一个小问题
- 最近遇到了一个问题,搞了好几天还是没有什么起色!郁闷中啦!
- Spring中遇到一个问题
- 在使用vue-router遇到的问题以及解决办法
- MySQL外键设置中的 Cascade、NO ACTION、Restrict、SET NULL
- BZOJ 4318 OSU!
- MongoDB TTL索引
- java中equals方法的用法以及==的用法(转)
- 浅显理解 设计模式-工厂模式(一)
- 在VUE中遇到了一个过渡问题
- android activity四种启动模式介绍及应用场景以及实例演示
- 从浏览器web端跳转到本地app(从h5跳native)
- kaldi群北京线下交流会(2017年4月9日)
- Python拉勾爬虫——以深圳地区数据分析师为例
- struct inode 和 struct file
- 华中科技大学 2010 奇偶校验
- I2C通信 读写数据过程
- Java、JFrame制作录制GIF小工具