Vue之过渡动画

Posted 2023-05-17

参考技术A 1、Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
2、本质上还是使用CSS3动画：transition、animation

1、使用transition组件，将要执行动画的元素包含在该组件内

2、例子 => 点击按钮隐藏和显示div

3、为显示和隐藏添加效果

Vue过渡动画

在vue中实现过渡动画，需要用到transition把需要被动画控制的元素包裹起来

1. <div id="demo">
2.   <button v-on:click="show = !show">
3.     Toggle
4.   </button>
5.   <transition name="fade">
6.     <p v-if="show">hello</p>
7.   </transition>
8. </div>
9.  
10. new Vue({
11.   el: \'#demo\',
12.   data: {
13.     show: true
14.   }
15. })
16. //fade-enter 这是一个时间点，是进入之前元素的起始状态，此时还没有进入
17. //fade-leave-to 是动画离开之后，离开的终止状态，此时元素动画已经结束
18. .fade-enter, .fade-leave-to {
19.   opacity: 0;
20. }
21. //fade-enter-active入场动画的时间段
22. //fade-leave-active 离场动画的时间段
23. .fade-enter-active, .fade-leave-active {
24.   transition: opacity .5s;
25. }