vue-學習筆記-過分動畫

 

速記：

1:transition 組件,對v-show,v-if,動態組件,組件根節點使用

 

 

 

 

 

Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果。
包括如下工具：

• 在 CSS 過渡和動畫中自動應用 class

• 能夠配合使用第三方 CSS 動畫庫，如 Animate.css

• 在過渡鉤子函數中使用 JavaScript 直接操做 DOM

• 能夠配合使用第三方 JavaScript 動畫庫，如 Velocity.js

 

1. CSS過渡 transition
2. CSS 動畫,CSS 動畫用法同 CSS 過渡，區別是在動畫中 v-enter 類名在節點插入 DOM 後不會當即刪除，而是在 animationend 事件觸發時刪除。

3. 自定義過渡的類名:他們的優先級高於普通的類名，這對於 Vue 的過渡系統和其餘第三方 CSS 動畫庫，如 Animate.css結合使用十分有用。

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

 

 

單元素/組件的過渡

Vue 提供了 transition 的封裝組件，在下列情形中，能夠給任何元素和組件添加進入/離開過渡

• 條件渲染 (使用 v-if)
• 條件展現 (使用 v-show)
• 動態組件
• 組件根節點

 

        當插入或刪除包含在 transition 組件中的元素時，Vue 將會作如下處理：

1. 自動嗅探目標元素是否應用了 CSS 過渡或動畫，若是是，在恰當的時機添加/刪除 CSS 類名。

2. 若是過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。

3. 若是沒有找到 JavaScript 鉤子而且也沒有檢測到 CSS 過渡/動畫，DOM 操做 (插入/刪除) 在下一幀中當即執行。(注意：此指瀏覽器逐幀動畫機制，和 Vue 的 nextTick 概念不一樣)

       若是你使用一個沒有名字的 <transition>，則 v- 是這些類名的默認前綴。

       若是你使用了 <transition name="my-transition">，那麼 v-enter 會替換爲 my-transition-enter。

 

 

 

過渡的類名：在進入/離開的過渡中，會有 6 個 class 切換。

 

 

CSS動畫

CSS 動畫用法同 CSS 過渡，區別是在動畫中 v-enter 類名在節點插入 DOM 後不會當即刪除，而是在 animationend 事件觸發時刪除。 

 

 

 

自定義過渡的類名

---

 咱們能夠經過如下特性來自定義過渡類名：

• 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/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

 

同時使用過渡和動畫:須要指定type="animation/animationend"

---

 Vue 爲了知道過渡的完成，必須設置相應的事件監聽器。它能夠是 transitionend 或 animationend ，這取決於給元素應用的 CSS 規則。

若是你使用其中任何一種，Vue 能自動識別類型並設置監聽。

可是，在一些場景中，你須要給同一個元素同時設置兩種過渡動效，好比 animation 很快的被觸發並完成了，而 transition 效果還沒結束。

在這種狀況中，你就須要使用 type 特性並設置 animation 或 transition 來明確聲明你須要 Vue 監聽的類型。

1

 

顯性的過渡持續時間:2.2.0 新增

---

 1: <transition :duration="1000">...</transition>

 2: <transition :duration="{ enter: 500, leave: 800 }">...</transition>

 

 

 

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 使用，也能夠單獨使用。

當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。不然，它們將被同步調用，過渡會當即完成。

推薦對於僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測。這也能夠避免過渡過程當中 CSS 的影響。

 

---

 

1. 初始化渲染的過渡，就是頁面一刷新就進入過渡渲染:

不管是 appear 特性仍是 v-on:appear 鉤子都會生成初始渲染過渡

 

 

 

 

多個元素的過渡

---

 

 對於原生標籤可使用 v-if/v-else 。最多見的多標籤過渡是一個列表和描述這個列表爲空消息的元素：儘可能使用key

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

 

 

過渡模式

在 「on」 按鈕和 「off」 按鈕的過渡中，兩個按鈕都被重繪了，一個離開過渡的時候另外一個開始進入過渡。這是 <transition> 的默認行爲 - 進入和離開同時發生

 在元素絕對定位在彼此之上的時候運行正常：

同時生效的進入和離開的過渡不能知足全部要求，因此 Vue 提供了 過渡模式

• in-out：新元素先進行過渡，完成以後當前元素過渡離開。

• out-in：當前元素先進行過渡，完成以後新元素過渡進入。

用 out-in 重寫以前的開關按鈕過渡：

 模式不是常常用到，但對於一些稍微不一樣的過渡效果仍是有用的

<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>in-out

多個組件的過渡:不須要key ,使用is

 

列表的進入/離開過渡:<transition-group>

 

 

 

列表的排序過渡

<transition-group> 組件還有一個特殊之處。不只能夠進入和離開動畫，還能夠改變定位。要使用這個新功能只需瞭解新增的 v-move 特性，它會在元素的改變定位的過程當中應用。像以前的類名同樣，能夠經過 name 屬性來自定義前綴，也能夠經過 move-class 屬性手動設置。

 

列表的交錯過渡

 

可複用的過渡:

過渡能夠經過 Vue 的組件系統實現複用。要建立一個可複用過渡組件，你須要作的就是將 <transition> 或者 <transition-group> 做爲根組件，而後將任何子組件放置在其中就能夠了。

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

 

 

動態過渡