Vue - 使用 transition 過渡動畫、Animate.css 庫動畫

当下是吾發表於2024-06-20
Vue動畫CSS

一. transition

  • transition 標籤包裹的內容會有一個過渡的動畫效果
  • 使用 transition 過渡元件需要滿足的條件：
    1. 條件渲染（v-if）
    2. 條件展示（v-show）
    3. 動態元件
  • 可以使用 name 屬性給 transition 標籤起名字
    1. class選擇器名字和 name 屬性有關係，這裡 name 屬性名為 fade, 則class選擇器名稱字首都已fade開頭，
    2. 如果不寫name屬性，則class選擇器名稱字首預設以 v 開頭
  • transition 標籤包裹的內容從隱藏變為顯示時候動畫原理
    1. 在動畫即將被執行的一瞬間（動畫執行的第一幀），會向transition內部的標籤上增加兩個class選擇器名字，分別是v-enter、v-enter-active
    2. 在動畫執行到第二幀的時候，會把 v-enter 的class選擇器名稱移除，然後增加一個v-enter-to的選擇器名稱
    3. 在動畫執行結束的時候(動畫執行的最後一幀），會把新增v-enter-active、v-enter-to的class選擇器名稱移除
  • transition 標籤包裹的內容從隱藏變為顯示時候動畫原理
    1. 在隱藏的第一個瞬間（動畫執行的第一幀），會向transition內部的標籤上增加兩個class選擇器名字，分別是v-leave、v-leave-active
    2. 在動畫執行到第二幀的時候，會把 v-leave 的class選擇器名稱移除，然後增加一個v-leave-to的選擇器名稱
    3. 在動畫執行結束的時候(動畫執行的最後一幀），會把新增v-leave-active、v-leave-to的class選擇器名稱移除
  • 過渡CSS類名
    <transition>中的name屬性用於 替換 vue鉤子函式中的類名 v ,預設為 v
    1. v-enter: 定義進入動畫之前，元素的起始狀態。在元素被插入時生效，在下一個幀移除。
    2. v-enter-active: 定義進入動畫的狀態。在元素被插入時生效，在transition/animation完成之後移除。
    3. v-leave:定義離開之後動畫的終止狀態。在離開過渡被觸發時生效，在下一個幀移除。
    4. v-leave-active: 定義離開動畫的結束狀態。在離開過渡被觸發時生效，在transition/animation完成之後移除。

一個過渡動畫的例項：

<template>
  <div class="wrap">
    <transition name="fade">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切換顯隱</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 3s;
}
</style>

二. Vue 中使用 @keyframes

1. @keyframes 的使用

  1. style 中設定@keyframes
  2. transition 標籤 class樣式中使用 @keyframes樣式名稱，這裡為 bounce-in
<template>
  <div class="wrap">
    <transition name="fade">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切換顯隱</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
@keyframes bounce-in{
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.fade-enter-active {
  transform-origin: left center;
  animation:bounce-in 1s;
}
.fade-leave-active {
  transform-origin: left center;
  animation:bounce-in 1s reverse;
}

2. 自定義 transition 標籤的 class 名字，使用 @keyframes

  1. 設定 transition 自定義 class 名

　　2. 設定 class 的過渡樣式

　　3. 一個例項

<template>
  <div class="wrap">
    <h2>css過渡動畫</h2>
    <transition name="fade" enter-active-class="active" leave-active-class="leave">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切換顯隱</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
@keyframes bounce-in{
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.active {
  transform-origin: left center;
  animation:bounce-in 1s;
}
.leave {
  transform-origin: left center;
  animation:bounce-in 1s reverse;
}
</style>

三. Vue 中使用Animate.css庫

1. 使用Animate.css庫，設定動畫

Animate.css 官網：https://animate.style/

    1. 專案中引入 Animate.css 庫
      使用教程：https://animate.style/#documentation

    2. 使用 Animate.css 庫

　　3. 一個例項

<template>
  <div class="wrap">
    <h2>css過渡動畫</h2>
    <transition name="fade" enter-active-class="animate__animated animate__bounceInDown" leave-active-class="animate__animated animate__bounceOut">
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切換顯隱</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
</style>

2. 頁面重新整理，展示Animate.css庫動畫效果

上面設定的動畫效果，在重新整理的時候是沒有效果的；如果需要在頁面重新整理時，也展示動畫效果，需要新增以下設定：

3. 同時使用 transition 動畫，和Animate.css 庫動畫效果

  1. 增加 class 名

　　2. style 中編寫對應的樣式

　　3. 同時使用 transition 動畫，和 Animate.css 庫動畫，動畫時長不一致時，手動設定動畫時長基準。設定 type 屬性
　　 Animate.css 庫動畫預設為一秒結束，這裡 transition 動畫設定的時 3 秒結束，所以以 transition 動畫為基準，三秒結束動畫 type="transition"

　　4. 自定義動畫時長
　　　　為 transition 標籤新增繫結 duration 屬性，值為毫秒數 :duration="10000"

　　5. 自定義動畫時長，分別設定顯示和隱藏的動畫時長
　　　　為 transition 標籤新增繫結 duration 屬性，值為一個物件 :duration="{enter:5000,leave:10000}"

　　6. 一個例項

<template>
  <div class="wrap">
    <h2>css過渡動畫</h2>
    <transition
      :duration="{enter:5000,leave:10000}"
      name="fade"
      appear
      enter-active-class="animate__animated animate__bounce fade-enter-active"
      leave-active-class="animate__animated animate__shakeX fade-leave-active"
      appear-active-class="animate__animated animate__bounceInDown"
    >
      <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">切換顯隱</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 3s;
}
</style>

相關文章