Vue复习：transition动画以及animate.css动画库的使用

1、切换的动画

Vue中的动画最重大的一个点是该组件(或是标签元素)必须存在状态的改变，动画效果才会生效，列如下面这段代码，如果不加v-if或不加v-show，该部分是不会有任何动画效果展示的。

<template>
  <div id="demo">
    <button @click="isShow=!isShow">切换</button>
    <!-- 过渡动画 -->
    <transition name="myfade">
      <p v-show="isShow">123456789</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      isShow:true
    };
  },
};
</script>

<style scoped>
.myfade-enter-active , .myfade-leave-active {
  transition: all 1s;
}
.myfade-enter,.myfade-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
</style>

2、transition的使用

<transition name="动画名字自定义">
    组件或是标签元素
</transition>

3、transition的几个动画类名的理解

.myfade-enter：进入过渡动画的开始状态，元素被插入时即生效（运动的初始状态）
.myfade-enter-active：进入过渡动画的结束状态，这一部分在整个过渡阶段中应用，元素被插入之前生效，在过渡动画完成之后移除。
.myfade-enter-to：在元素被插入之后下一帧生效（此时.myfade-enter移除），过渡动画完成之后移除
.myfade-leave：定义离开过渡的开始状态，在离开过渡被触发时立刻生效。
.myfade-leave-active： 定义离开过渡生效时的状态，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
.myfade-leave-to：在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除

3.1、对应的状态过程：
opacity : 0 -> 1对应此时动画开始.myfade-enter->.myfade-enter-active->.myfade-enter-to
opacity : 1 -> 0对应结束.myfade-leave->.myfade-leave-active->.myfade-leave-to

3.2、结论：
根据上面的过渡形式：在.myfade-enter-active和.myfade-leave-active的过程中是可以控制进入和离开的动画曲线的。
需要注意的是：如果transition没有添加名字，那么动画效果就需要是v-开头。

4、animate.css动画库的使用

4.1、安装或者link引入

• npm安装
  npm install animate.css@3.5.1 --save
• link引入

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

4.2、main.js全局引入

import animated from  animate.css ;
Vue.use(animated)

4.3、组件中使用

<template>
  <div id="demo">
    <button @click="isShow = !isShow">click</button><br/>
            <transition 
                name="custom-classes-transition"
                enter-active-class="animated bounceInRight"
                leave-active-class="animated bounceOutRight">
                <p v-if="isShow">测试Animate.css动画库的动画效果</p>
            </transition>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      isShow:true
    };
  },
};
</script>

<style scoped>
</style>

4.4、当不希望使用时的卸载操作
npm uninstall animate.css --save
4.5、动画效果演示