Vue（九）：vue过渡

　　前言：Vue的官网上提供了两种过渡的效果，一个呢是对元素的过渡，比如元素渐变消失，旋转着出现之类的。另外一种呢，是监测数据，比如你把一个数值从0改到10，显示出来的效果就是从0变成1，变成2...变成10，根据这个还能搞颜色的过渡。在我看来，这些过渡还是比较炫酷的，毕竟没见过啥世面。这里做一个简单的介绍吧，以后要是能用到，也算了解过。

1、元素过渡
　　Vue提供了transition组件，我一开始想说标签来着，但是官网说是组件，那应该就是一个全局的组件，在组件中放了一个插槽。
　　首先我们要给transition组件设置一个name的值，然后vue会自动根据这个对应的值渲染对应的class，这个对应的class是谁搞的呢？是你。vue在渲染transition这个组件的时候，会根据先后顺序切换6个class，这6个class分别是v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to。还记得我们之前说的name值吗？假设我们设的name值是class1，那么vue就会寻找一个叫”class1-enter“的class，然后切换至“class1-enter-active”······最后切换至“class1-leave-to”，没错，name值替换的就是v。我们通过设置“class1-enter“呀、“class1-enter-active”呀这些class来搞事情。照例上段代码：

<template>
    <div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
</template>

<script>
export default {
    data() {
        return{
            show: true
        }
    }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

　　CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

　　同时，该组件也提供了一堆生命钩子，我们可以在提供的生命钩子中填入自定义的方法。生命钩子如下

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

2、状态过渡

　　这里讲解的就比较简单了，因为，太难了。我们在前言里面讲过，状态过渡，主要就是监测数据，监测数据的也是我们的老朋友了，侦听器。这里配合着第三方的动画库呀啥的，就完成我在前言里说的效果了。一句话：我对他的认知，就是通过监听数据，配合第三方的动画库，搞各种骚操作。具体怎么操作，就不细细研究了。

Vue（九）：vue过渡

猜你喜欢