关于vue的过渡本人也是在网上百度得出的实践，实际和CSS3的过渡是差不多的，下面我简单介绍一下（不喜勿喷~）：
主体结构：
复制代码
1<button @click="show=!show">show</button>
复制代码
1
2
3<transition name="fold"> <div style="width:200px;height:200px;background:blue;"></div> </transition>
<style>
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24.fold-enter-active { animation-name: fold-in; animation-duration: .5s; } .fold-leave-active { animation-name: fold-out; animation-duration: .5s; } @keyframes fold-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fold-out { 0% { opacity: 1; } 100% { opacity: 0; } }
</style>
最后
以上就是搞怪裙子最近收集整理的关于vue.js transition的过渡效果介绍~~~~~的全部内容，更多相关vue.js内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复