Vue中的过渡、动画、动态组件

过渡与动画

vue中实现过渡或是动画一共提供了这样四种形式：

• 在 CSS 过渡和动画中自动应用 class – 自己写css3动画
• 可以配合使用第三方 CSS 动画库，如 Animate.css – 别人写好了类名，我们用
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js – 用别人写好的动画库

1. Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
   • 条件渲染 (使用 v-if)
   • 条件展示 (使用 v-show)
   • 动态组件
   • 组件根节点

举例：

  <style>
      .fade-enter-active, .fade-leave-active{
          transition: all 1s; 
      }
      .fade-enter, .fade-leave-to{
          opacity: 0;
      }
  </style>

  <div id="app">
    <button @click = 'flag = !flag'> 切换 </button>
    <transition name="fade" mode="">
      <p v-show = 'flag'> 切换的内容 </p>
    </transition>
  </div>

<script>
  new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })
</script>

• 在进入/离开的过渡中，会有 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 被删除)，在过渡/动画完成之后移除。

  • 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

• 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: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

2. 使用第三方的css过渡库 animate.css

• 先要引入animate.css

 <div id="app">
    <button @click = 'flag = !flag'> 切换 </button>
    <transition 
      name="fade" mode="out-in"
      enter-active-class = "animated slideInLeft"
      leave-active-class = "animated slideOutLeft"
    >
      <p v-show = 'flag'> 切换的内容 </p>
    </transition>
  </div>

<script>
    new Vue ({
        el: '#app',
        data:{
            flag:true,
        },
    })
</script>

• <transition> 的默认行为 - 进入和离开同时发生。同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式，也就是<transition>的mode属性：

  • in-out：新元素先进行过渡，完成之后当前元素过渡离开。

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

动态组件

• 动态组件：
  动态组件是vue内部提供了一个叫做component的组件，这个组件身上可以通过绑定is属性来进行 组件的切换

<div id="app">
      <button @click = " name = name === 'Aa'? 'Bb':'Aa'"> 切换 </button> 
      <component :is = "name"></component>
  </div>

 Vue.component( 'Aa',{
    template: '<h3> AA </h3>'
  })
  Vue.component( 'Bb',{
    template: '<h3> BB </h3>'
  })
  new Vue({
    el: '#app',
    data: {
      name: 'Aa'
    }
  })

• 在动态组件上使用 keep-alive

  • 当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题
    为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

  • keep-alive组件可以进行组件的内容缓存，将组件的内容存入浏览器缓存中，这样可以大大的节省街切换的事件

  • keep-alive 和 component动态组件两者常常一起搭配使用

<div id="app">
      <button @click = " name = name === 'Aa'?'Bb':'Aa'"> 切换 </button>
      <keep-alive include="">
        <component :is = "name"></component>
      </keep-alive>
  </div>