【Vue】transition動畫

LJTin發表於2018-11-21
Vue動畫
1.Vue 提供了 transition 的封裝元件，可以給任何元素和元件新增進入/離開過渡
  1. 條件渲染 (使用 v-if)
  2. 條件展示 (使用 v-show)
  3. 動態元件
  4. 元件根節點

<transition name="fade">
    <p v-if="show">hello</p>
</transition>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}複製程式碼

動畫執行的過程：

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

  1. 檢測目標元件是否應用了 CSS 過渡(transtion)或動畫(animation)，如果是，則新增/刪除 CSS 類名。

  2. 如果過渡元件提供了 JavaScript 鉤子函式，這些鉤子函式將在恰當的時機被呼叫。

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

2.使用css3動畫


 <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
 </transition>

.bounce-enter-active {
  transform-origin:left center; //解決放大縮小可能遇到的問題
  animation: bounce-in .5s;
}
.bounce-leave-active {
  transform-origin:left center; //解決放大縮小可能遇到的問題
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}複製程式碼

3.自定義過渡的類名

<transition name="bounce" enter-active-class='active' leave-active-class='leave'>
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
 </transition>

.active {
  transform-origin:left center; //解決放大縮小可能遇到的問題
  animation: bounce-in .5s;
}
.leave {
  transform-origin:left center; //解決放大縮小可能遇到的問題
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}複製程式碼

使用animate.css 庫動畫

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"  type="text/css">
  
  <transition
    name="custom-classes-transition" //類名隨意
    enter-active-class="animated tada"   //animated必須寫，否則無法進行動畫
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
複製程式碼

4.同時使用過渡和動畫

初始化渲染頁面的動畫

可以通過 appear 特性設定節點在初始渲染的過渡

css類名為swing
<transition
  appear //必須寫，宣告初始化渲染
  appear-class="swing" //可不寫
  appear-to-class="swing" (2.1.8+)//版本需求
  appear-active-class="swing"
>
  <!-- ... -->
</transition>複製程式碼

5.動畫的過渡時間

在這種情況下你可以用 <transition> 元件上的 duration 屬性定製一個顯性的過渡持續時間 (以毫秒計)：

<transition :duration="1000">...</transition>
複製程式碼

你也可以定製進入和移出的持續時間：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>
複製程式碼

6.Javascript鉤子（可配合Velocity.js）

<transition
  :before-enter="beforeEnter"
  :enter="enter"
  :after-enter="afterEnter"
  :enter-cancelled="enterCancelled"

  :before-leave="beforeLeave"
  :leave="leave"
  :after-leave="afterLeave"
  :leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
複製程式碼
// ...
當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回撥。
否則，它們將被同步呼叫，過渡會立即完成。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) {
    // ...
  }
}複製程式碼

7.多元素或元件過渡

當有相同標籤名的元素切換時，Vue 為了效率只會替換相同標籤內部的內容,需要通過 key 特性設定唯一的值來標記以讓 Vue 區分

給在 <transition> 元件中的多個元素設定 key 是一個更好的實踐。

<transition mode='in-out'>   //in-out先進入後移除   out-in 先移除後進入
    <div v-if='show' key='hello'>hello</div>
    <div v-else key='bye'>bye</div>
</transition>複製程式碼

元件過渡動畫可以使用is的特性來完成，不需要使用key來進行區分

8.列表過渡

<transition-group>

<transition-group name="list" tag="p">
    <span v-for="item in items" :key="item">
      {{ item }}
    </span>
</transition-group>複製程式碼

相當於

<transition>
  <span>
    {{ item }}
  </span>
  <span>
    {{ item }}
  </span>
  <span>
    {{ item }}
  </span>
</transition>複製程式碼


相關文章