一使用方法

1.设置一个开始动画的初始效果（因为当前的效果为结束的效果）

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(80px);
}

2.设置动画的过度时间

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

3.使用 Vue 提供的 transition 包裹要进行动画的元素

<transition>
      <h3 v-if="flag">这是一个H3！！</h3>
</transition>

4.可以通过标签属性 name 来指定不同动画

可以使用 transition 的name属性来自定义类名

    .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(80px);
    }

    .my-enter-active,
    .my-leave-active {
      transition: all 0.5s ease;
    }

    <transition name="my">
      <h3 v-if="flag2">这是一个H3！！</h3>
    </transition>

5.使用第三方类库实现动画

引入animate库（动画库）https://daneden.github.io/animate.css/?

<link rel="stylesheet" href="./lib/animate.css">

使用 transition 的 enter-active-class 和 leave-active-class 来指定 animate 对应的动画类，类名前面需要加 animated

<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
    <h3 v-if="flag">这是一个H3！！</h3>
  </transition>

也可以将 animated 抽取到做动画的子标签内。transition 内用 :duration 来设置动画时长。或者用

duration ="{enter:500,leave:300}"

分别设置入场和出场动画时长

<>
<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight" :duration="400">
  <h3 v-if="flag" class="animated">这是一个H3！！</h3>
</transition>

6.半场动画的实现

使用3个钩子函数来控制动画
在 transition 标签内利用 @before-enter @enter @after-enter 来绑定钩子函数

@before-enter 动画入场之前执行，配置起始的效果
@enter 动画入场之后执行，配置借宿的效果，以及过程（和动画时间）
@after-enter 动画播放完毕之后，重置动画参数，隐藏元素等操作

<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
</transition>

<script>
 vm = new Vue({
            el: '#app',
            data: { },
            methods: {
              //钩子函数的第一个参数el 表示 要执行动画的DOM原生的 js 对象
              beforeEnter(el) {
              //beforeEnter 动画入场之前执行，此时动画尚未开始
              //设置动画起始位置
                el.style.transform = "translate(0px,0px)";
              },
              enter(el, done) {
                //beforeEnter 动画开始之后执行，这里可以设置小球完成动画之后结束状态
                //设置动画起始位置
                //可以认为el.offsetWidth会强制刷新动画
                el.offsetWidth
                el.style.transform = "translate(150px,450px)";
                el.style.transition = "all 1s ease";
                //这里的done其实就是afterEnter函数,也就是说done是 afterEnter 函数的引用
                //如果不掉用会出现延时
                //意思就是直接执行结束的函数
                done();
              },
              afterEnter(el) {
                //beforeEnter 动画入场之前执行，此时动画尚未开始
                console.log('OK');
                this.flag = false;
              }
  }
});
</script>

这里如果重复将flage设为ture会出现一个bug，就是动画会出现卡顿。

//这里新增一个钩子 before-leave
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="leave">
      <div class="ball" v-show="flag"></div>
</transition>

<script>
    var vm = new Vue({
      el: "#app",
      data: {
        flag: false,
        click: true,
      },
      methods: {
        playAnimation() {
          if (this.click === true) {
            this.flag = true;
            this.click = false;
          }
        },
        //钩子函数的第一个参数el 表示 要执行动画的DOM原生的 js 对象
        beforeEnter(el) {
          //beforeEnter 动画入场之前执行，此时动画尚未开始

          //设置动画起始位置
          el.style.transform = "translate(0px,0px)";
        },
        enter(el, done) {
          //beforeEnter 动画开始之后执行，这里可以设置小球完成动画之后结束状态

          //设置动画起始位置

          //可以认为el.offsetWidth会强制刷新动画
          el.offsetWidth
          el.style.transform = "translate(150px,450px)";
          el.style.transition = "all 1s ease";
          //这里的done其实就是afterEnter函数,也就是说done是 afterEnter 函数的引用
          //如果不掉用回出现延时
          done();
        },
        afterEnter(el) {
          //beforeEnter 动画入场之前执行，此时动画尚未开始
          this.flag = false;
        },
        //利用新增的钩子函数控制是否可以再次播放
        leave() {
          console.log('OK');
          this.click = true;
        }
      }
    });
  </script>

列表动画

利用 <transition-group appear tag="ul"> 来替换原来的ul标签

1.css配置方式和之前一致：

.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateX(80px);
}
    
.v-enter-active,
.v-leave-active {
    transition: all 0.5s ease;
}

在实现列表过度动画时，需要过度的元素是通过v-for循环渲染出来不能使用transiton 包裹，需要使用 transitonGroup
给transition-group 添加 appear 熟悉实现入场效果
可以通过 tag 熟悉来制定 transition-group 渲染成什么标签

<transition-group appear tag="ul">
    <li v-for="(item,i) in list" :key="item.id" @click='del(i)'>
        ID: {{item.id}} , 名字: {{item.name}}
    </li>
</transition-group> -->

8.动画