【Vue】基礎系列(九)動畫與過渡-trasition-enter-leave

語言: CN / TW / HK

theme: vue-pro highlight: a11y-dark


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

「這是我參與11月更文挑戰的第22天,活動詳情檢視:2021最後一次更文挑戰

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

1. vue動畫的理解

操作css的trasitionanimation

vue會給目標元素新增/移除特定的class

2. 基本過渡動畫的編碼

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

  2. 定義class樣式

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

3. 過渡的類名

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

https://cn.vuejs.org/images/transition.png

過渡程式碼示例

```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

YK菌學前端

YK菌天天學前端

<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


YK菌一直在學前端

```

在這裡插入圖片描述

```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菌做好朋友

「其他文章」