一. transition

• transition 标签包裹的内容会有一个过渡的动画效果
• 使用 transition 过渡组件需要满足的条件：
  1. 条件渲染（v-if）
  2. 条件展示（v-show）
  3. 动态组件
• 可以使用 name 属性给 transition 标签起名字
  1. class选择器名字和 name 属性有关系，这里 name 属性名为 fade, 则class选择器名称前缀都已fade开头，
  2. 如果不写name属性，则class选择器名称前缀默认以 v 开头
• transition 标签包裹的内容从隐藏变为显示时候动画原理
  1. 在动画即将被执行的一瞬间（动画执行的第一帧），会向transition内部的标签上增加两个class选择器名字，分别是v-enter、v-enter-active
  2. 在动画运行到第二帧的时候，会把 v-enter 的class选择器名称移除，然后增加一个v-enter-to的选择器名称
  3. 在动画执行结束的时候(动画执行的最后一帧），会把添加v-enter-active、v-enter-to的class选择器名称移除
• transition 标签包裹的内容从隐藏变为显示时候动画原理
  1. 在隐藏的第一个瞬间（动画执行的第一帧），会向transition内部的标签上增加两个class选择器名字，分别是v-leave、v-leave-active
  2. 在动画运行到第二帧的时候，会把 v-leave 的class选择器名称移除，然后增加一个v-leave-to的选择器名称
  3. 在动画执行结束的时候(动画执行的最后一帧），会把添加v-leave-active、v-leave-to的class选择器名称移除
• 过渡CSS类名
  <transition>中的name属性用于 替换 vue钩子函数中的类名 v ,默认为 v
  1. v-enter: 定义进入动画之前，元素的起始状态。在元素被插入时生效，在下一个帧移除。
  2. v-enter-active: 定义进入动画的状态。在元素被插入时生效，在transition/animation完成之后移除。
  3. v-leave:定义离开之后动画的终止状态。在离开过渡被触发时生效，在下一个帧移除。
  4. v-leave-active: 定义离开动画的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。

一个过渡动画的实例：

<template>
  <div class="wrap">
    <transition name="fade">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切换显隐</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 3s;
}
</style>

二. Vue 中使用 @keyframes

1. @keyframes 的使用

1. style 中设置@keyframes
2. transition 标签 class样式中使用 @keyframes样式名称，这里为 bounce-in

<template>
  <div class="wrap">
    <transition name="fade">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切换显隐</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
@keyframes bounce-in{
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.fade-enter-active {
  transform-origin: left center;
  animation:bounce-in 1s;
}
.fade-leave-active {
  transform-origin: left center;
  animation:bounce-in 1s reverse;
}

2. 自定义 transition 标签的 class 名字，使用 @keyframes

1. 设置 transition 自定义 class 名
   

2. 设置 class 的过渡样式
   

3. 一个实例

   <template>
     <div class="wrap">
       <h2>css过渡动画</h2>
       <transition name="fade" enter-active-class="active" leave-active-class="leave">
         <div v-show="show">hello world</div>
       </transition>
       <button @click="handleClick">切换显隐</button>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         show: true,
       };
     },
     methods: {
       handleClick() {
         this.show = !this.show;
       },
     },
   };
   </script>
   <style scoped>
   @keyframes bounce-in{
     0% {
       transform: scale(0);
     }
     50% {
       transform: scale(1.5);
     }
     100% {
       transform: scale(1);
     }
   }
   .active {
     transform-origin: left center;
     animation:bounce-in 1s;
   }
   .leave {
     transform-origin: left center;
     animation:bounce-in 1s reverse;
   }
   </style>
   

三. Vue 中使用Animate.css库

1. 使用Animate.css库，设置动画

Animate.css 官网：https://animate.style/

1. 项目中引入 Animate.css 库
   使用教程：https://animate.style/#documentation

2. 使用 Animate.css 库
   

3. 一个实例

   <template>
     <div class="wrap">
       <h2>css过渡动画</h2>
       <transition name="fade" enter-active-class="animate__animated animate__bounceInDown" leave-active-class="animate__animated animate__bounceOut">
         <div v-show="show">hello world</div>
       </transition>
       <button @click="handleClick">切换显隐</button>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         show: true,
       };
     },
     methods: {
       handleClick() {
         this.show = !this.show;
       },
     },
   };
   </script>
   <style scoped>
   </style>
   

2. 页面刷新，展示Animate.css库动画效果

上面设置的动画效果，在刷新的时候是没有效果的；如果需要在页面刷新时，也展示动画效果，需要添加以下设置：

3. 同时使用 transition 动画，和Animate.css 库动画效果

1. 增加 class 名
   

2. style 中编写对应的样式
   

3. 同时使用 transition 动画，和 Animate.css 库动画，动画时长不一致时，手动设置动画时长基准。设置 type 属性
   Animate.css 库动画默认为一秒结束，这里 transition 动画设置的时 3 秒结束，所以以 transition 动画为基准，三秒结束动画
   type="transition"
   

4. 自定义动画时长
   为 transition 标签添加绑定 duration 属性，值为毫秒数
   :duration="10000"
   

5. 自定义动画时长，分别设置显示和隐藏的动画时长
   为 transition 标签添加绑定 duration 属性，值为一个对象
   :duration="{enter:5000,leave:10000}"
   

6. 一个实例

   <template>
     <div class="wrap">
       <h2>css过渡动画</h2>
       <transition
         :duration="{enter:5000,leave:10000}"
         name="fade"
         appear
         enter-active-class="animate__animated animate__bounce fade-enter-active"
         leave-active-class="animate__animated animate__shakeX fade-leave-active"
         appear-active-class="animate__animated animate__bounceInDown"
       >
         <div v-show="show">hello world</div>
       </transition>
       <button @click="handleClick">切换显隐</button>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         show: true,
       };
     },
     methods: {
       handleClick() {
         this.show = !this.show;
       },
     },
   };
   </script>
   <style scoped>
   .fade-enter,
   .fade-leave-to {
     opacity: 0;
   }
   .fade-enter-active,
   .fade-leave-active {
     transition: opacity 3s;
   }
   </style>