可復用過渡和動態過渡 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　本文將詳細介紹可復用過渡和動態過渡

可復用過渡

　　過渡可以通過 Vue 的組件系統實現復用。要創建一個可復用過渡組件，需要做的就是將 <transition> 或者 <transition-group> 作為根組件，然后將任何子組件放置在其中就可以了

Vue.component('my-transition', {
  template: `
    <transition name="transition1" mode="out-in" @before-enter="beforeEnter" @after-enter="afterEnter">
      <slot></slot>
    </transition>
  `,
  methods: {
    beforeEnter: function (el) {
      // ...
    },
    afterEnter: function (el) {
      // ...
    }
  }
})

　　函數組件更適合完成這個任務

Vue.component('my-special-transition', {
  functional: true,
  render: function (createElement, context) {
    var data = {
      props: {
        name: 'very-special-transition',
        mode: 'out-in'
      },
      on: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    }
    return createElement('transition', data, context.children)
  }
})

動態過渡

　　在 Vue 中即使是過渡也是數據驅動的！動態過渡最基本的例子是通過 name 特性來綁定動態值

<transition v-bind:name="transitionName">
  <!-- ... -->
</transition>

　　用 Vue 的過渡系統來定義的 CSS 過渡/動畫在不同過渡間切換會非常有用

　　所有的過渡特性都是動態綁定。它不僅是簡單的特性，通過事件的鉤子函數方法，可以在獲取到相應上下文數據。這意味著，可以根據組件的狀態通過 JavaScript 過渡設置不同的過渡效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="dynamic-fade-demo" class="demo">
  Fade In: <input type="range" v-model="fadeInDuration" min="0" :max="maxFadeDuration">
  Fade Out: <input type="range" v-model="fadeOutDuration" min="0" :max="maxFadeDuration">
  <transition :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <p v-if="show">小火柴的藍色理想</p>
  </transition>
  <button v-if="stop" @click="stop = show = false">運行動畫</button>
  <button v-else @click="stop = true">停止動畫</button>
</div>
<script type="text/javascript" src="velocity.min.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script>
new Vue({
  el: '#dynamic-fade-demo',
  data: {
    show: true,
    fadeInDuration: 1000,
    fadeOutDuration: 1000,
    maxFadeDuration: 1500,
    stop: true
  },
  mounted() {
    this.show = false
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      Velocity(el,{ opacity: 1 },{duration: this.fadeInDuration,complete:()=>{
          done();
          if (!this.stop){
            this.show = false;
          }
        }
      })
    },
    leave(el, done) {
      Velocity(el,{ opacity: 0 },{duration: this.fadeOutDuration,complete:()=>{
          done();
          this.show = true;
        }
      })
    },
  },
})
</script>
</body>
</html>