20. 过渡动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

• 在 CSS 过渡和动画中自动应用 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

单元素，组件的过渡

vue提供了【transition】的封装组件，在下列情况中可以使用——

• 条件渲染（v-if）
• 条件展示（v-show）
• 动态组件
• 组件根节点

如：

<div class="app">
      <div @click="clickMethods">点我</div>
      <div v-show="showEle">显示</div>
      <transition name="fade">
        <div v-show="showEle">显示</div>
      </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      var vm = new Vue({
        el: ".app",
        data: {
          showEle: true
        },
        methods: {
          clickMethods: function() {
            this.showEle = !this.showEle;
          }
        }
      });
    </script>

在处理transition的时候，vue会进行三组操作：

1. 嗅探元素是否应用了css过渡或者动画。如果是，会在需要的时候切换这些类名。
2. 如果过渡组件提供了【钩子函数】，那么函数也会在需要的时候加载
3. 如果上述都没有检测到，dom操作会立即执行，直接变成最终形态。

一个transition组件需要在组件上绑定一个name，如fade，配套的css，如fade-enter, .fade-leave-to，当然fade能一键替换的，或者钩子函数。

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

css动画

css过渡和css动画不同，css过渡是设定好终点，vue补间过程，而css动画则是用keyframe书写css动画——

 .fade2-enter-active{
        animation: fade2-in .5s;
      }
      .fade2-leave-active{
        animation:  fade2-in .5s reverse;
      }
      @keyframes fade2-in{
        0%{opacity: 0;transform: scale(3)}

        100% {opacity: 1;transform: scale(1)}
      }

<div @click="clickMethods2">点我2</div>
      <transition name="fade2">
        <div v-show="showEle2" style="transform-origin: 0 0">显示</div>
      </transition>

自定义过渡类名

这些个类名可以当做属性去修改覆盖：
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class

在我们需要整合第三方动画库的时候，将第三方的类名覆盖上去，即可直接调用第三方的动画库：

 <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>

同时使用过渡和动画

两种方式自然可以同时使用，互不影响。而vue监听的时候需要注意一些细节。

显性的过渡时间

我们还可以定制动画时间：

<transition :duration="1000">...</transition>
// 或者定制进入和移出时间
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

这些定制不会改变进场动画，而是改变后续的持续动画。

javaScript钩子

可以再属性中声名JavaScript钩子

<transition
  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"
>
  <!-- ... -->
</transition>

各个方法会在methods中定义并在设定的动画执行的时候触发。

如果仅用js过渡元素的话，推荐

v-bind:css="false"

属性，这会使vue跳过检测css动画，提高性能和避免影响。

初始渲染的过渡

和上面的反复显影就会反复出现的过渡不同，初始渲染的过渡只会出现一次。
虽说可以设定的状态有不少，但是貌似只有【appear-to-class】起作用。

<transition name="fade3" appear appear-to-class="bclass" appear-class="aclass" appear-active-class="cclass">
      <div v-show="showEle" style="transform-origin: 0 0">显示</div>
    </transition>

另外，这个和fade一样，也有js钩子：

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

多个元素的过渡

你可以将一组切换的元素放在transition里面，里面的元素的显隐切换都会调用transition规定的动画。
另外

切换的元素必须带上key，否则动画切换失效

.my-div {
        position: relative;
    }

    .btn {
        position: absolute;
        left: 30px;
        top: 10px;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }



 <transition name="fade">
            <!-- <button class="btn" :key="show" @click="show=!show">{{show ? 'on' : 'off'}}</button> -->
            <button key="on" v-if="show" class="btn" @click="show = !show">on</button>
            <button key="off" v-else="show" class="btn" @click="show = !show">off</button>
        </transition>

如此，就可以将元素动态切换了，注意的是元素在切换的过程中可能两个元素同时出现，解决方法就是下面的。

过渡模式

元素有两种过渡模式，防止切换的元素同时存在造成的定位问题：
in-out：新元素先进行过渡，完成之后当前元素过渡离开。

out-in：当前元素先进行过渡，完成之后新元素过渡进入

<transition name="fade" mode="out-in">
            <component :is="componentName"></component>
        </transition>

在transition中使用mode后，可以看到两个元素不在同时存在。

多个组件过渡

组件比元素更为简单，使用好is就足够了，也不需要key

<transition name="fade" mode="out-in">
            <component :is="componentName"></component>
        </transition>

列表的进入、离开过渡

我们已经可以使用单个节点的元素切换，那么，如何渲染一个列表，例如让列表中的元素变更的时候动态插入与消失？
这时候，我们使用的便是transition-group组件。
该组件有三个特性

1. 和transition不同，transition解析出来是一个真是的span元素，你可以通过tag特性更变为其他元素
2. 过渡模式不可用，因为这不是对元素进行切换
3. 内部的元素【总是需要一个唯一的key值】

列表的进入离开过渡

需要引入插件。。。

动态过渡

过渡可以在过程中修改数据哦。
因为动画的每一个阶段都带有钩子，所以每一个阶段你都可以获取到事件，并更换参数。