Vue基础篇--组件的过度和动画效果

vue中实现的动画只是组件在更新时，也就是组件开始展示或组件消失时实现的逐渐过度的效果，这样不会因为页面突然的跳转而让用户感觉很突兀，而是使用简单的转场动画，实现页面或者组件切换时候的动态变换的效果。

单元素或组件的过度

如果一个元素被渲染到页面或者从页面中消失时需要实现动画的效果，那么第一步是使用 vue提供的transition  标签进行包裹，在transition 标签中标签或者组件，会做以下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名，在这些类中定义了不同的样式和操作，从而实现动画的效果。
2. 如果过渡组件提供了 JavaScript 钩子函数，那么将在设定的时机调用这些钩子函数，在钩子函数内部，对元素的样式进行修改，也可以实现动画的效果。

所以vue给我们提供了上面两种方式来实现动画。

元素的切换主要有以下几种情况：

• v-if 进行条件渲染
• v-show 条件渲染
• 组件切换

例如：

<transition name="fade">
    <p v-if="show">hello</p>
</transition>

根据show 的状态，这个P标签会进行切换，那么使用 <transiton> 作为他的父标签。

过度的类

这是使用第一方式，vue 在指定的时机为 标签添加或者移除class，所以我们在这些class 中定义开始样式，中间的样式，结束时的样式即可实现动画，vue提供了指定的6个类名，分别对应了在6个不同的时机的样式，以此进行切换。

1. v-enter：进入时的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：(2.1.8 版及以上) 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：(2.1.8 版及以上) 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

有了这6个类，我们只需要在这里面添加对应的样式即可。向下面这样

<style>
  .my-enter, .my-leave-to {} ;      // 进场之前状态和出场之后的最状态，这两个状态的样式应该是相同的，所以这里统一设置。
  .my-enter-active, .my-leave-active {};    // 进场之后，出场之前状态也是相同的，也统一设置
</style>

// 没有指定 name, style中使用 v-前缀，制定了name, 使用name指定的前缀即可，my-enter
// duration 指定过度时间
<transition name="my" :duration="{ enter: 500, leave: 800 }">        
  <h3> 动画操作的内容 </h3>
</transition>

钩子函数

可以在 <transiton> 的 attribute 中声明 JavaScript 钩子函数，然后在vue的methods中定义这些函数

<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>

<script>
  var vm = Vue({
      methods:{
      // 进入时的四个钩子函数
        beforeEnter(el, done){},    // el 是当前执行动画过度的标签对象，done 是回调函数，可选
      enter(el, done){},
      afterEnter(el, done){},
      enterCancelled(){}
    }
  })
</script>

当只用 钩子函数过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

如果使用钩子函数过度，为了避免css 类的过度影响，可以在transition标签中添加v-bind:css="false"，Vue 会跳过 CSS 的检测