Vue.js: 進階過渡效果

Vue

Vue.js 的進階過渡效果,含載入時的漸變效果、過度模式、元件間的過渡、列表過渡、可重複使用的過渡效果。

載入時的漸變效果

<transition>設定 appear 屬性可增加載入時的漸變效果。

預設樣式類別

預設使用 enter 或 leave 的樣式類別,Prefix 為「v-」。範例如下,使用 enter 的樣式類別v-enter-active

.v-enter-active {
  animation: go 2s;
}

客製化樣式類別

<transition>加入以下屬性,用來設定客製化樣式類別。

鉤子

<transition>中綁定鉤子(JavaScript Hooks),可和 CSS 漸變和動畫效果一起使用。

範例

Demo。

載入時的漸變效果

程式碼。

<div id="app">
  <transition
    appear
    appear-active-class="fade-enter-active"
    @before-appear="beforeAppear"
    @appear="appear"
    @after-appear="afterAppear"
  >
    <div class="block"></div>
  </transition>
</div>
.fade-enter-active {
  animation: go 2s;
}

@keyframes go {
  from {
    background: #fff;
  }
  to {
    background: #999;
  }
}
var vm = new Vue({
  el: '#app',
  methods: {
    beforeAppear: function(el) {
      console.log('beforeAppear');
    },
    appear: function(el) {
      console.log('appear!');
    },
    afterAppear: function(el) {
      console.log('afterAppear!');
    },
  },
});

程式碼

過渡模式(Transition Modes)

過渡模式有兩種:「in-out」和「out-in」。

in-out

如下範例,點擊按鈕「Click Me!」後,Box 2 先淡入,然後 Box 1 再淡出。

out-in

<button @click="show = !show">Click Me!</button>
<transition mode="in-out">
  <div class="block" v-if="show">Block 1</div>
  <p class="block" v-else>Block 2</p>
</transition>

程式碼

out-in

如下範例,點擊按鈕「Click Me!」後,Box 1 先淡出,然後 Box 2 再淡入。

out-in

<button @click="show = !show">Click Me!</button>
<transition mode="out-in">
  <div class="block" v-if="show">Block 1</div>
  <p class="block" v-else>Block 2</p>
</transition>

程式碼

無過渡模式

如果沒有特別指定元素漸變的順序,則預設是同步的。意即,Block 1 與 Block 2 同時發生漸變,一個淡入,另一個淡出。

無過渡模式

程式碼

元件間的過渡

使用動態組件實現元件間的過渡。

如下所示,點擊按鈕「Click Me!」後,藉由切換 template,Box 1 先淡出,然後 Box 2 再淡入。

Demo。

元件間的過渡

程式碼。

<button @click="changeView()">Click Me!</button>
<transition mode="out-in">
  <component :is="view"></component>
</transition>
...
components: {
  'v-a': {
    template: '<div class="block">Block 1</div>'
  },
  'v-b': {
    template: '<p class="block">Block 2</p>'
  }
}

程式碼

列表過渡

以上都是處理單一元素或一次顯示一個元素的狀況,如果是對一群元素做漸變或動畫該怎麼處理呢?例如,當我們使用v-for迭代出一連串的元素 / 資料的時候-使用<transition-group>來處理吧,而<transition-group>有以下特色。

進入與離開

如下所示,點擊按鈕「Click Me!」後,新加入「Zoe」到尾端。

Demo。

列表過渡

程式碼。

備註:由於部落格會把花括號吃掉,因此在左右加一個點,例如「.{.{ }.}.」。

<button @click="add()">Click Me!</button>
<transition-group name="list" tag="div">
  <span v-for="item in items" class="list-item" :key="item.id">
    .{.{ item.name }.}.
  </span>
</transition-group>
var vm = new Vue({
  el: '#app',
  data: {
    show: false,
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Bill' },
      { id: 3, name: 'Cathy' },
      { id: 4, name: 'Faith' },
      { id: 5, name: 'Gary' },
    ],
  },
  methods: {
    add: function() {
      this.items.push({ id: 6, name: 'Zoe' });
    },
  },
});

程式碼

可重複使用的過渡效果

將過渡或動畫效果撰寫成元件,意即,將<transition><transition-group>包在 template 裡面。

例如,將「載入時的漸變效果」寫成元件。

Vue.component('fade-enter-transition', {
  template: '<transition appear\
      appear-active-class="fade-enter-active">\
      <div class="block"></div>\
    </transition>',
});

程式碼

參考資料


vue.js vue.js transitions vue.js animations