Vue2.X 过渡动画

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

• 微博：极客江南
• 微信公众号：李南江
• 腾讯课堂： 李南江
• 网易云课堂：李南江

给Vue控制的元素添加过渡动画

如何给Vue控制的元素添加过渡动画
1、将需要执行动画的元素放到transition组件中
2、当transition组件中的元素显示时会自动查找.v-enter .v-enter-active .v-enter-to类名
  当transition组件中的元素隐藏时会自动查找.v-leave .v-leave-active .v-leave-to类名
3、我们只需要在.v-enter和.v-leave-to中指定动画动画开始的状态
  在.v-enter-active和.v-leave-active中指定动画执行的状态
  即可完成过渡动画

html代码：

<div id="app">
    <button @click="toggle">我是按钮</button>
    <transition>
        <div class="box" v-show="isShow"></div>
    </transition>
</div>

vue代码：

// 这里就是MVVM中的View Model
let vue = new Vue({
   
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
   
        isShow: false
    },
    // 专门用于存储监听事件回调函数
    methods: {
   
        toggle(){
   
            this.isShow = !this.isShow;
        }
    },
    // 专门用于定义计算属性的
    computed: {
   
    }
});

给多个不同元素指定不同过渡动画

transition注意点:
transition中只能放一个元素, 多个元素无效
如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件

初始动画设置
默认情况下第一次进入的时候没没有动画的
如果想一进来就有动画, 我们可以通过给transition添加appear属性的方式
告诉Vue第一次进入就需要显示动画

如何给多个不同的元素指定不同的动画

• 如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式
  来指定"进入之前/进入之后/进入过程中, 离开之前/离开之后/离开过程中"对应的类名
• 来实现不同的元素执行不同的过渡动画

html代码：

<div id="app">
    <button @click="toggle">我是按钮</button>
    <transition appear name="one">
        <div class="box" v-show="isShow"></div>
		<!--<div class="box" v-show="isShow"></div>-->
    </transition>
    <transition appear name="two">
        <div class="box" v-show="isShow"></div>
    </transition>
</div>

vue代码：

// 这里就是MVVM中的View Model
let vue = new Vue({
   
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
   
    	isShow: true
    },
    // 专门用于存储监听事件回调函数
    methods: {
   
        toggle(){
   
            this.isShow = !this.isShow;
        }
    },
    // 专门用于定义计算属性的
    computed: {
   
    }
});

保存过渡动画最终的效果

当前过渡存在的问题
通过transition+类名的方式确实能够实现过渡效果
但是实现的过渡效果并不能保存动画之后的状态
因为Vue内部的实现是在过程中动态绑定类名, 过程完成之后删除类名
正式因为删除了类名, 所以不能保存最终的效果

在Vue中如何保存过渡最终的效果
通过Vue提供的JS钩子来实现过渡动画
v-on:before-enter="beforeEnter"进入动画之前
v-on:enter="enter"进入动画执行过程中
v-on:after-enter="afterEnter"进入动画完成之后
v-on:enter-cancelled="enterCancelled"进入动画被取消

v-on:before-leave="beforeLeave"离开动画之前
v-on:leave="leave"离开动画执行过程中
v-on:after-leave="afterLeave"离开动画完成之后
v-on:leave-cancelled="leaveCancelled"离开动画被取消

S钩子实现过渡注意点
1、在动画过程中必须写上el.offsetWidth或者el.offsetHeight
2、在enter和leave方法中必须调用done方法, 否则after-enter和after-leave不会执行
3、需要需要添加初始动画, 那么需要把done方法包裹到setTimeout方法中调用

html代码：

<div id="app">
    <button @click="toggle">我是按钮</button>
    <!--
    注意点: 虽然我们是通过JS钩子函数来实现过渡动画
            但是默认Vue还是回去查找类名, 所以为了不让Vue去查找类名
            可以给transition添加v-bind:css="false"
    -->
    <transition appear
                v-bind:css="false"
                v-on:before-enter