VUE2中文文檔：進入、離開和列表過度

阿新 • • 發佈：2018-05-14

bsp nbsp 網格 animation 展示 get mount 定義 data

進入、離開和列表的過渡

概述

當從 DOM 中插入、更新或移除項目時，Vue 提供多種應用過渡效果的方式。包括以下工具：

在 CSS 過渡和動畫中自動處理 class
可以配合使用第三方 CSS 動畫庫，如 Animate.css
在過渡鉤子函數中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

單元素/組件的過渡

Vue 提供了 transition 外層包裹容器組件(wrapper component)，可以給下列情形中的任何元素和組件添加進入/離開(enter/leave)過渡

條件渲染（使用 v-if

）
條件展示（使用 v-show）
動態組件
組件根節點

//這是一個簡單的示例
<div id="demo">
  <button v-on:click="show = !show">//每次點擊改變data中show的布爾值
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p> 　//通過show的值判斷是否展示該元素　　　
  </transition>
</div>
new Vue({
  el: ‘#demo‘,
  data: {
    show: true
  }
})
.fade-enter-active, .fade-leave-active { 　　//設定進入和離開過程中的效果 
，改變屬性opacity和時間0.5s
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active 在低於版本 2.1.8 中 */ {  //設定進入前和離開後的效果
  opacity: 0;
}

過渡類名(Transition Classes)

v-enter：進入式過渡(entering transition)的開始狀態。在插入元素之前添加，在插入元素之後一幀移除。
v-enter-active：進入式過渡的激活狀態。應用於整個進入式過渡時期。在插入元素之前添加，過渡/動畫(transition/animation)完成之後移除。此 class 可用於定義進入式過渡的 duration, delay 和 easing 曲線。
v-enter-to：僅適用於版本 2.1.8+。進入式過渡的結束狀態。在插入元素之後一幀添加（同時，移除 v-enter），在過渡/動畫完成之後移除。
v-leave：離開式過渡(leaving transition)的開始狀態。在觸發離開式過渡時立即添加，在一幀之後移除。
v-leave-active：離開式過渡的激活狀態。應用於整個離開式過渡時期。在觸發離開式過渡時立即添加，在過渡/動畫(transition/animation)完成之後移除。此 class 可用於定義離開式過渡的 duration, delay 和 easing 曲線。
v-leave-to：僅適用於版本 2.1.8+。離開式過渡的結束狀態。在觸發離開式過渡之後一幀添加（同時，移除 v-leave），在過渡/動畫完成之後移除。

CSS 過渡(CSS Transitions)

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: ‘#example-1‘,
  data: {
    show: true
  }
})
/* 進入和離開動畫可以分別 */
/* 設置不同的持續時間(duration)和動畫函數(timing function) */
.slide-fade-enter-active {   //進入過程
  transition: all .3s ease;
}
.slide-fade-leave-active {   //離開過程
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to   //進入開始和離開結束的狀態
/* .slide-fade-leave-active 在低於 2.1.8 版本中 */ {
  transform: translateX(10px);
  opacity: 0;
}

CSS 動畫(CSS Animations)

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>

new Vue({
  el: ‘#example-2‘,
  data: {
    show: true
  }
})

.bounce-enter-active {
  animation: bounce-in .5s;        //設定進入過程中執行animation動畫bounce-in，時間0.5s
}
.bounce-leave-active { 　　　　　　　　//設定離開過程中逆向（reverse）執行animation： bounce-in 時間0.5s
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);             //0%時期狀態  規模0 
  }
  50% {
    transform: scale(1.5); 　　　　　　//50%時期狀態 規模1.5
  }
  100% {
    transform: scale(1); 　　　　　　　　//同上
  }
}

自定義過渡的 class 類名(Custom Transition Classes)

你也可以通過提供一下屬性來指定自定義過渡類名

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

它們將覆蓋默認約定的類名，這對於將 Vue 的過渡系統和其他現有的第三方 CSS 動畫庫（如 Animate.css）集成使用會非常有用。

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">  //引用animate.css

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"              //使用animate.css中的動畫，會覆蓋本身的v-enter-active類名
    leave-active-class="animated bounceOutRight"  　　//同上
  >
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: ‘#example-3‘,
  data: {
    show: true
  }
})

同時使用過渡和動畫(Using Transitions and Animations Together) （不懂，如果使用第三方，類名覆蓋了還怎麽過度？）

Vue 為了知道過渡何時完成，必須附加相應的事件監聽器。它可以是 transitionend 或 animationend，這取決於給元素應用的 CSS 規則。如果你使用其中任何一種，Vue 能自動識別正確的類型並設置相應的事件監聽器。

但是，在一些情況下，你可能需要給同一個元素同時設置過渡和動畫，比如由 Vue 觸發 CSS 動畫，同時在鼠標懸停時觸發 CSS 過渡。在這種情況下，你可能需要通過 type 屬性，來顯式聲明需要 Vue 監聽的類型，值可以是 animation 或 transition。

顯式過渡持續時間(Explicit Transition Durations)

你可以使用 <transition> 組件上的 duration 屬性，來指定一個顯式的過渡持續時間（以毫秒為單位）：

<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: {
  // --------
  // 進入時
  // --------

  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 過渡/動畫使用，也可以單獨使用。

當僅使用 JavaScript 式過渡的時候，在 enter 和 leave 鉤子函數中，必須有 done 回調函數。否則，這兩個鉤子函數會被同步調用，過渡會立即完成。

推薦對於僅使用 JavaScript 的過渡顯式添加 v-bind:css="false"，以便 Vue 可以跳過 CSS 偵測。這也可以防止 CSS 規則意外幹涉到過渡。

現在我們深入來看一個示例。這裏是一個使用 Velocity.js 的 JavaScript 式過渡：

<!--
Velocity works very much like jQuery.animate and is
a great option for JavaScript animations
-->
<script src="https://lib.baomitu.com/velocity/1.2.3/velocity.min.js"></script> //引用velocity.js

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"  //監聽三個鉤子函數，稍後在methods中定義
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"  　　　　　　//純js實現動畫，跳過css檢測
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>

new Vue({
  el: ‘#example-4‘,
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {    //設定進入開始狀態函數
      el.style.opacity = 0
    },
    enter: function (el, done) {     //設定進入過程函數
      Velocity(el, { opacity: 1, fontSize: ‘1.4em‘ }, { duration: 300 })   
      Velocity(el, { fontSize: ‘1em‘ }, { complete: done })
    },
    leave: function (el, done) { 　　　　//設定離開過程函數
      Velocity(el, { translateX: ‘15px‘, rotateZ: ‘50deg‘ }, { duration: 600 })
      Velocity(el, { rotateZ: ‘100deg‘ }, { loop: 2 })
      Velocity(el, {
        rotateZ: ‘45deg‘,
        translateY: ‘30px‘,
        translateX: ‘30px‘,
        opacity: 0
      }, { complete: done })
    }
  }
})

在初始渲染時過渡

如果你還想在節點初始渲染時應用過渡，可以添加 appear 屬性：

<transition appear>
  <!-- ... -->
</transition>

默認情況下，對於進入和離開，會使用特定過渡。但是，如果你有需要，也可以指定自定義 CSS 類名：

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"（僅 >= 2.1.8 支持）
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

以及指定自定義 JavaScript 鉤子函數：

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

多個元素之間切換過渡

我們將在下面討論多個元素之間切換過渡，但是還是可以使用 v-if/v-else，來對初始元素之間進行切換過渡。最常見的是，一個列表容器和描述列表為空的消息，這兩個元素間的切換過渡：

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>

當在具有相同標簽名稱的元素之間切換時，需要通過給它們分配唯一的 key 屬性，以使 Vue 感知它們是不同的元素。否則 Vue 的編譯器將因為效率，只會替換元素內部的內容。即使在技術上沒有必要，但是，給 <transition> 組件中的多個元素設置 key，被認為是一個最佳實踐。

通過給同一元素的 key 屬性，設置不同的狀態來進行過渡。而無需使用 v-if 和 v-else。

實際上，使用 v-if 的多個元素之間的過渡，還可以改為在單個元素上綁定動態屬性的方式，來在任意數量的元素之間進行轉換。

<transition>
  <button v-if="docState === ‘saved‘" key="saved">
    Edit
  </button>
  <button v-if="docState === ‘edited‘" key="edited">
    Save
  </button>
  <button v-if="docState === ‘editing‘" key="editing">
    Cancel
  </button>
</transition>

可以重寫為：

<transition>
  <button v-bind:key="docState">
    {{ buttonMessage }}
  </button>
</transition>
// ...
computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case ‘saved‘: return ‘Edit‘
      case ‘edited‘: return ‘Save‘
      case ‘editing‘: return ‘Cancel‘
    }
  }
}

過渡模式

當一個過渡進入時，另一個過渡離開。這是 <transition> 的默認行為 - 進入和離開同時發生。

同時生效的進入式和離開式過渡不能滿足所有要求，所以 Vue 提供了可選的過渡模式：

in-out：新元素先過渡進入(transition in)，過渡完成之後，當前元素過渡離開(transition out)。
out-in：當前元素先過渡離開(transition out)，過渡完成之後，新元素過渡進入(transition in)。

多個組件之間過渡

多個組件之間的過渡甚至更簡單 - 我們不需要使用 key 屬性。相反，我們需要使用動態組件:

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>


new Vue({
  el: ‘#transition-components-demo‘,
  data: {
    view: ‘v-a‘
  },
  components: {
    ‘v-a‘: {
      template: ‘<div>Component A</div>‘
    },
    ‘v-b‘: {
      template: ‘<div>Component B</div>‘
    }
  }
})

.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active 在低於 2.1.8 版本中 */ {
  opacity: 0;
}

列表過渡

當我們整個列表的每一項（例如使用 v-for）都需要同時進行渲染呢？在這種情況下，我們將使用 <transition-group> 組件。在我們深入示例之前，先來了解關於這個組件的一些要點：

不同於 <transition>，它會以一個真實元素渲染：默認為 <span>。你也可以通過 tag 屬性更換為其他渲染元素
它內部的元素必須具有唯一的 key 屬性

進入式/離開式列表過渡

現在讓我們來深入一個示例，進入式過渡和離開式過渡都使用與之前相同的 CSS 類名：

<div id="list-demo">
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list" tag="p">   //列表渲染過度用transition-group標簽
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>
new Vue({
  el: ‘#list-demo‘,
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)   //選取一個隨機索引（0.x和當前數組長度乘）
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)     //num++然後加入數組中隨機索引位置
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)  　　　　　　　　　　　　//隨機刪除
    },
  }
})
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active 在低於 2.1.8 版本中 */ {
  opacity: 0;
  transform: translateY(30px);
}

列表的位移過渡

<transition-group> 組件還有一個暗藏玄機之處。不僅可以在進入和離開時進行動畫，還可以在位置改變時進行動畫。使用此功能所需要知道的唯一新的概念是，在項目位置改變時添加額外的 v-move 類名。與其他類名相同，它的前綴也和設置的 name 屬性的值相匹配，你也可以通過 move-class 屬性來手動指定類名。

此類名對於指定過渡時間和 easing 過渡曲線非常有用，如下所示：

<script src="https://lib.baomitu.com/lodash.js/4.14.1/lodash.min.js"></script>  //引用lodash.js

<div id="flip-list-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>　　　　　　　　
  <transition-group name="flip-list" tag="ul">               //此標簽真實渲染，通過tag設定為ul，下面可用li，不設定默認span標簽
    <li v-for="item in items" v-bind:key="item"> 　　　　　　　　//‘一定帶唯一的key
      {{ item }}
    </li>
  </transition-group>
</div>
new Vue({
  el: ‘#flip-list-demo‘,
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)                  //調用loadsh.js中的_.shuffle
    }
  }
})
.flip-list-move { 　　　　　　　　　　　　　　　　　　　　　　　　//列表過度，項目發生改變時會添加額外的v-modle屬性，通過設置此屬性就可以實現變動的項目的過渡效果
  transition: transform 1s;
}

需要註意的是，使用 FLIP 過渡的元素，在設置為 display: inline 時，無法正常運行。作為替代方案，可以將元素設置為 display: inline-block，或者將元素放置於 flex 上下文(flex context)中。

FLIP 動畫不局限於單個軸線方向(single axis)，多個維度網格(multidimensional grid)也同樣可以過渡：

列表的漸進過渡

通過 data 屬性與 JavaScript 式過渡的通信，就可以實現列表的逐項漸進過渡：

<script src="https://lib.baomitu.com/velocity/1.2.3/velocity.min.js"></script>     //引用velocity.js

<div id="staggered-list-demo">
  <input v-model="query">         //和data中的query對象實現雙向綁定，query實時接受input的value
  <transition-group
    name="staggered-fade"
    tag="ul"
    v-bind:css="false"                     //跳過css檢測
    v-on:before-enter="beforeEnter"  　　　　//監聽js鉤子函數
    v-on:enter="enter"
    v-on:leave="leave"
  >
    <li
      v-for="(item, index) in computedList"       //取computedList中的數組成員
      v-bind:key="item.msg"
      v-bind:data-index="index"　　　　　　　　　　　　//？？ 用此屬性作為漸進過度的延遲時間計算
    >{{ item.msg }}</li>
  </transition-group>
</div>
new Vue({
  el: ‘#staggered-list-demo‘,
  data: {
    query: ‘‘,
    list: [
      { msg: ‘Bruce Lee‘ },
      { msg: ‘Jackie Chan‘ },
      { msg: ‘Chuck Norris‘ },
      { msg: ‘Jet Li‘ },
      { msg: ‘Kung Fury‘ }
    ]
  },
  computed: {
    computedList: function () {
      var vm = this
      return this.list.filter(function (item) {　　　　　　　　　　　//返回匹配成功的對象數組
        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1      //字母小寫=》匹配query   ？？！==-1
      })
    }
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter: function (el, done) {
      var delay = el.dataset.index * 150 　　　　　　　　//dataset可以讀取自定義數據屬性，這裏dataset.index讀取data-index　　　　
      setTimeout(function () { 　　　　　　　　　　　　　　//設定延遲執行時間，這樣data-index越大的過度延遲越久，視覺上就實現了逐步渲染
        Velocity(
          el,
          { opacity: 1, height: ‘1.6em‘ },
          { complete: done }
        )
      }, delay)
    },
    leave: function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 0, height: 0 },
          { complete: done }
        )
      }, delay)
    }
  }
})

可復用的過渡

通過 Vue 的組件系統可以實現復用過渡。要創建一個可復用過渡，你需要做的就是將 <transition> 或者 <transition-group> 作為組件根節點，然後將全部子內容放置在 transition 組件中就可以了。

Vue.component(‘my-special-transition‘, {
  template: ‘    <transition      name="very-special-transition"      mode="out-in"      v-on:before-enter="beforeEnter"      v-on: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 屬性(attribute)和動態屬性(dynamic property)綁定在一起。

當你使用多個 Vue 過渡類名約定，來定義 CSS 過渡/動畫，並在不同的類名約定之間切換時，動態過渡會非常有用。

所有的過渡屬性都可以動態綁定。並且不僅是屬性，由於事件鉤子函數都是 Vue 的方法(methods)，所以可以從 this 上下文訪問到所有數據。這意味著，根據組件的狀態，JavaScript 式過渡的表現可能會有所不同。

<script src="https://lib.baomitu.com/velocity/1.2.3/velocity.min.js"></script>

<div id="dynamic-fade-demo" class="demo">
  Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration">     //動態綁定max屬性到data，但是有何意義?
  Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">
  <transition
    v-bind:css="false"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
  >
    <p v-if="show">hello</p>
  </transition>
  <button
    v-if="stop"
    v-on:click="stop = false; show = false"
  >Start animating</button>
  <button
    v-else
    v-on:click="stop = true"
  >Stop it!</button>
</div>

new Vue({
  el: ‘#dynamic-fade-demo‘,
  data: {
    show: true,
    fadeInDuration: 1000,
    fadeOutDuration: 1000,
    maxFadeDuration: 1500,                         
    stop: true
  },
  mounted: function () {
    this.show = false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
    },
    enter: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 1 },
        {
          duration: this.fadeInDuration,
          complete: function () {
            done()
            if (!vm.stop) vm.show = false
          }
        }
      )
    },
    leave: function (el, done) {
      var vm = this
      Velocity(el,
        { opacity: 0 },
        {
          duration: this.fadeOutDuration,
          complete: function () {
            done()
            vm.show = true
          }
        }
      )
    }
  }
})

VUE2中文文檔：進入、離開和列表過度

bsp nbsp 網格 animation 展示 get mount 定義 data 進入、離開和列表的過渡概述當從 DOM 中插入、更新或移除項目時，Vue 提供多種應用過渡效果的方式。包括以下工具：在 CSS 過渡和動畫中自動處理 class 可以配合

VUE2中文文檔：進入、離開和列表過度

進入、離開和列表的過渡

概述

單元素/組件的過渡

過渡類名(Transition Classes)

CSS 過渡(CSS Transitions)

CSS 動畫(CSS Animations)

自定義過渡的 class 類名(Custom Transition Classes)

同時使用過渡和動畫(Using Transitions and Animations Together) （不懂，如果使用第三方，類名覆蓋了還怎麽過度？）

顯式過渡持續時間(Explicit Transition Durations)

JavaScript 鉤子函數

在初始渲染時過渡

多個元素之間切換過渡

過渡模式

多個組件之間過渡

列表過渡

進入式/離開式列表過渡

列表的位移過渡

列表的漸進過渡

可復用的過渡

動態過渡

相關推薦