Vue3 appear 失效 如何使用 appear

最近在學習 vue3 的動畫時遇到 appear  無法生效的問題

問題的具體表現:

看以下代碼,按理應該來說,如果我們設置 fuct-appear-from,fuct-appea-active 後在元素初始出現時應該會有一個效果

html

<Transition name="fuct" appear>
  <div class="doc" v-if="show"></div>
</Transition>

css

/* 初次效果 */
.fuct-appear-active{
  transition: all .3s ease-in-out;
}
.fuct-appear-from{
  transform: translateY(7em);
}
/* 進入與離開的動畫 */
.doc{
  width:50px;
  height:50px;
  background-color: red;
}
.fuct-enter-from,
.fuct-leave-to{
  transform: translateX(2em);
}
.fuct-enter-active,
.fuct-leave-active{
  transition: all .5s ease-out;
}

如果你和我一樣設置了上面這樣的屬性與樣式,說明你和我一樣沒有理解這個 appear " 初次 "的意思

先說一下代碼中的語法錯誤,首先不存在 *-appear-from 等這樣的動畫設置,只有 appear-active-class 的自定義動畫屬性,這也是我一直認為動畫不生效的原因

其他問題與疑問 的解決

什麼是" 初次 " ?

　　首先要搞明白這個初次出現的問題,這個初次指的是頁面在 預設 渲染的情況下的初次 ,簡單來說就是 這個元素是預設顯示的,即 v-if="show" 中 show預設為 true. 如果預設是不顯示的元素,appear 設置後也是無效果的

初次動畫是什麼?

　　在解決初次動畫後,有的人認為這個初次動畫應該特殊一點 所以會 想應該有 *-appear-from 的css設定,但是其實沒有, 我也不知道為什麼我的VScode彈出了提示,其實這個初次動畫調用的是 進入動畫即 *-enter-from 系列動畫,

　　 因為預設情況下 如果元素預設顯示的情況下是不會調用  進入動畫元素的,設置appear 後 則會預設渲染時 執行 進入動畫 ;

可運行的調試代碼,嘗試刪除內部的 appear 刷新頁面,你就懂了

<template>
    <button @click="show=!show">click</button>
<Transition name="fuct" appear-from-c>
  <div class="doc" v-if="show"></div>
</Transition>
</template>

<script setup>
import { ref } from 'vue'
const show=ref(true)
</script>

<style>
/* 初次效果 */
fo-appear-active{
  transition: all .3s ease-in-out;
}
fo-appear-from{
  transform: translateY(7em);
}
/* 進入與離開的動畫 */
.doc{
  width:50px;
  height:50px;
  background-color: red;
}
.fuct-enter-from,
.fuct-leave-to{
  transform: translateX(2em);
} 
.fuct-enter-active,
.fuct-leave-active{
  transition: all .5s ease-out;
}
</style>

總結

　　appear 是一個在元素預設被顯示的情況下 調用進入動畫效果,使得元素在這種初次渲染情況下 執行進入動畫的屬性

　　　　當然如果你設定了 appear-from-class 等屬性 則會與 進入動畫同時執行

再提供一個是 class 自定義初次動畫的版本,你會發現appear 無論如何都會調用 enter 進入動畫,除非你不設置 enter 動畫

<script setup>
import {ref} from 'vue'
const show=ref(true);
</script>
<template>
<button @click="show = !show">Ckick</button>
<Transition name="fuct" appear
appear-active-class="active"
appear-to-class="to"
>
  <div class="doc" v-if="show"></div>
</Transition>
</template>
<style>
.active{
  transition: all .3s ease-in-out;
}
.to{
  transform: translateY(7em);
}


.doc{
  width:50px;
  height:50px;
  background-color: red;
}
.fuct-enter-from,
.fuct-leave-to{
  transform: translateX(2em);
}
.fuct-enter-active,
.fuct-leave-active,
.fuct-appear-active{
  transition: all .5s ease-out;
}
.fuct-appear-from{
  transform: translateY(6em);
}
</style>

如何使用 appear 

　　在閱讀本節前請一定查看了 失效問題的總結部分

　　appear 雖然沒有設定 *-appear-from 的css 但是保留了 appear-from-class自定義屬性 

　　　　對於沒有其他動畫需求的內容,只需要一個進入的特殊動畫,我們只需要設置以下 自定義動畫屬性即可, appear-active-class="active" 或者 使用enter動畫,只設置appear 只是容易搞混,而且enter是會被重覆使用的

　　這個屬性主要還是對頁面動畫的一種補充,對於一開始在頁面顯示的元素,提供一種更加平滑的顯示,使用 enter 與 class 動畫形式以實際環境為準

　　在enter 與 class 同時設定時

　　　　enter與class會同時運行

　　　　enter與class 有動畫內容衝突時 enter的應用級別高於 class 的自定義動畫,這甚至會讓 class的全部動畫失效

2023-10-01 16:23:48

由於本人還在學習中,上述文章中出現問題煩請 聯繫 Email : [email protected]