---

theme: vue-pro highlight: a11y-dark

---

嗨！~ 大家好，我是YK菌 🐷 ，一個微系前端 ✨，愛思考，愛總結，愛記錄，愛分享 🏹，歡迎關注我呀 😘 ~ [微信號: yk2012yk2012，微信公眾號：ykyk2012]

「這是我參與11月更文挑戰的第22天，活動詳情查看：2021最後一次更文挑戰」

今天我們主要來學習Vue中的動畫與過渡

1. vue動畫的理解

操作css的trasition或animation

vue會給目標元素添加/移除特定的class

2. 基本過渡動畫的編碼

1. 在目標元素外包裹<transition name="xxx">

2. 定義class樣式

3. 指定過渡樣式: transition
4. 指定隱藏時的樣式: opacity/其它

3. 過渡的類名

• xxx-enter-active: 指定顯示的transition
• xxx-leave-active: 指定隱藏的transition
• xxx-enter: 指定隱藏時的樣式

過渡代碼示例

```css / 顯示/隱藏的過渡效果 / .xxx-enter-active, .xxx-leave-active{ transition: opacity 0.5s; } / 隱藏時的樣式 / .xxx-enter, .xxx-leave-to{ opacity: 0; }

.move-enter-active { transition: all 1s; } .move-leave-active { transition: all 3s; } .move-enter, .move-leave-to { opacity: 0; transition: translateX(20px); } ```

```html

<div>
    <button @click="isShow = !isShow">顯示/隱藏</button>
    <transition-group name="hello" appear>
        <h1 v-show="!isShow" key="1">你好啊！</h1>
        <h1 v-show="isShow" key="2">尚硅谷！</h1>
    </transition-group>
</div>

```

動畫代碼示例

css .bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }

```html

```

```html

```

使用第三方動畫庫

https://animate.style/

```html

```

總結

作用：在插入、更新或移除 DOM元素時，在合適的時候給元素添加樣式類名。

寫法：

1. 準備好樣式：

   • 元素進入的樣式：
     1. v-enter：進入的起點
     2. v-enter-active：進入過程中
     3. v-enter-to：進入的終點
   • 元素離開的樣式：
     1. v-leave：離開的起點
     2. v-leave-active：離開過程中
     3. v-leave-to：離開的終點

2. 使用<transition>包裹要過度的元素，並配置name屬性：

html <transition name="hello"> <h1 v-show="isShow">你好啊！</h1> </transition>

1. 備註：若有多個元素需要過渡，則需要使用：<transition-group>，且每個元素都要指定key值。

最後，歡迎關注我的專欄，和YK菌做好朋友