Enter & Leave Transitions

Vue.js 將過場漸變的效果包裝成一個獨立的 transition 元件，再由開發者自行定義元素的進場 (Enter) 、退場 (Leave) 以及動畫過程漸變 (Transitions) 的樣式。動畫執行完後才會把 DOM 元素拔掉

元素進場 (顯示) ：
v-enter-from: 進入的開始狀態。在插入元素之前添加，在插入元素之後刪除一幀。
v-enter-active: 進入的活動狀態。在整個進入階段應用。在插入元素之前添加，在過渡/動畫結束時將其刪除。此類可用於定義進入過渡的持續時間，延遲和緩和曲線。
v-enter-to: 進入的結束狀態。元素插入後添加了一幀（同時 v-enter-from 刪除），過渡/動畫結束後刪除。

元素退場 (消失) ：
v-leave-from: 離開的開始狀態。觸發離開過渡時立即添加，在一幀後移除。
v-leave-active: 離開的活動狀態。在整個離開階段應用。觸發離開過渡時立即添加，當過渡/動畫結束時將其移除。此類可用於定義離開過渡的持續時間，延遲和緩和曲線。
v-leave-to: 離開的結束狀態。觸發離開過渡（同時 v-leave-from 刪除）後添加一幀，在過渡/動畫結束時刪除。

範例一: 淡入淡出

transition 定義 name=”fade”，style 將會加入 fade 樣式

import { ref } from "vue";
export default {
  setup() {
    const isAmin = ref(false);
    return {
      isAmin,
    };
  },
};

<div id="demo">
  <button @click="isAmin = !isAmin">Toggle</button>
  <transition name="fade">
    <div v-if="isAmin" class="box"></div>
  </transition>
</div>

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

範例二: 使用 keyframes 做 bounce 動畫

import { ref } from "vue";
export default {
  setup() {
    const isAmin = ref(false);
    return {
      isAmin,
    };
  },
};

<div id="demo">
  <button @click="isAmin = !isAmin">Toggle</button>
  <transition name="bounce">
    <div v-if="isAmin" class="box"></div>
  </transition>
</div>

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

有 v-for 時需用 transition-group

<div id="list-demo">
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

使用 Vue transition 製作動畫過渡組件