Vue3 appear 失效的問題及如何使用 appear

更新時間：2023年10月07日 10:37:45 作者：Fuck_C++

appear 是一個在元素默認被顯示的情況下調用進入動畫效果,使得元素在這種初次渲染情況下執(zhí)行進入動畫的屬性,最近在學習vue3的動畫時遇到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 后則會默認渲染時執(zhí)行進入動畫 ;

可運行的調試代碼,嘗試刪除內部的 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 是一個在元素默認被顯示的情況下調用進入動畫效果,使得元素在這種初次渲染情況下執(zhí)行進入動畫的屬性

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

再提供一個是 class 自定義初次動畫的版本,你會發(fā)現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>