认识动画
====================
方案一：transition动画
====================
方案二：Animate.css
- 用法1、和Vue 的过渡系统结合使用
- 用法2、通过vue定义的动画属性使用
====================
方案三：gsap 库

认识动画

目前实现有很多方案，如
1、vue内置的transition动画
2、Animate css动画效果
3、gsap JS动画

====================

方案一：transition动画

单个组件使用

1、用标签包裹单个组件或单个元素
2、定义 name 属性
3、定义一些class，需要是你定义的name开头的，后面跟特定的字符，如下是最常用的6个

上图的Opacity是css的一个属性透明度，这是拿这个属性举个例子。

你可以在不同的状态定义不同的css属性，让系统根据前后两个状态自动完成切换动画

多个组件使用

特点

1、默认情况下，它不会渲染一个元素的包裹器，但是你可以指定一个元素并以 tag attribute 进行渲染；

<transition-group tag="p" name="why">
  <span v-for="item in numbers" :key="item" class="item">
    {{item}}
  </span>
</transition-group>

tag=”p”，相当于span标签外面包裹一层p标签

<transition-group tag="ul">
  <li v-for="(item, index) in showNames" :key="item" :data-index="index">
    {{item}}
  </li>
</transition-group>

2、过渡模式不可用，因为我们不再相互切换特有的元素；

3、内部元素总是需要提供唯一的 key attribute 值；

4、CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身

其他动画

原理

其他属性/设置

1、同时设置过渡和动画

使用时注意：
1、div这种块级元素（默认占据整行）表现会有问题，可以设置成inlineblock
2、多个动画时间不一致，通过type设置以哪个为准

2、设定指定动画过渡时间

设置后，class里面设置的时间就无效了。还可以单独设置进入时间（enter）和退出时间（leave）。

3、过渡的模式mode

多用于动态组件之间切换，没有添加mode属性就会很糟糕，两个组一起显示

4、初次渲染时的动画效果

动画生命周期

transition 组件给我们提供了动画的生命周期函数，这些函数可以帮助我们监听动画执行到什么阶段了。

<template>
  <div class="app">
    <div><button @click="isShow = !isShow">显示/隐藏</button></div>
    <transition @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter"
                @before-leave="beforeLeave"
                @leave="leave"
                @afterLeave="afterLeave">
      <h2 class="title" v-if="isShow">Hello World</h2>
    </transition>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isShow: true
      }
    },
    methods: {
      beforeEnter() {
        console.log("进入动画，开始前触发这个事件");
      },
      enter(el,done) {
        // 常用
        console.log("进入动画，开始后触发这个事件");
        done()
      },
      afterEnter() {
        console.log("进入动画，播放完后触发这个事件");
      },
      beforeLeave() {
        console.log("消失动画，开始前触发这个事件");
      },
      leave(el,done) {
        // 常用
        console.log("消失动画，开始后触发这个事件");
        done()
      },
      afterLeave() {
        console.log("消失动画，播放完后触发这个事件");
      }
    }
  }
</script>
<style scoped>
  .title {
    display: inline-block;
  }
</style>