快捷導(dǎo)航

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

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

appear 是一個在元素默認(rèn)被顯示的情況下調(diào)用進(jìn)入動畫效果,使得元素在這種初次渲染情況下執(zhí)行進(jìn)入動畫的屬性,最近在學(xué)習(xí)vue3的動畫時遇到appear無法生效的問題,本文給大家詳細(xì)講解,感興趣的朋友一起看看吧

最近在學(xué)習(xí) vue3 的動畫時遇到 appear 無法生效的問題

問題的具體表現(xiàn):

看以下代碼,按理應(yīng)該來說,如果我們設(shè)置 fuct-appear-from,fuct-appea-active 后在元素初始出現(xiàn)時應(yīng)該會有一個效果

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);
}
/* 進(jìn)入與離開的動畫 */
.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;
}

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

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

其他問題與疑問的解決

什么是" 初次 " ?

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

初次動畫是什么?

　　在解決初次動畫后,有的人認(rèn)為這個初次動畫應(yīng)該特殊一點(diǎn) 所以會想應(yīng)該有 *-appear-from 的css設(shè)定,但是其實(shí)沒有, 我也不知道為什么我的VScode彈出了提示,其實(shí)這個初次動畫調(diào)用的是進(jìn)入動畫即 *-enter-from 系列動畫,

　　因為默認(rèn)情況下如果元素默認(rèn)顯示的情況下是不會調(diào)用進(jìn)入動畫元素的,設(shè)置appear 后則會默認(rèn)渲染時執(zhí)行進(jìn)入動畫 ;

可運(yùn)行的調(diào)試代碼,嘗試刪除內(nèi)部的 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);
}
/* 進(jìn)入與離開的動畫 */
.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>

總結(jié)

　　appear 是一個在元素默認(rèn)被顯示的情況下調(diào)用進(jìn)入動畫效果,使得元素在這種初次渲染情況下執(zhí)行進(jìn)入動畫的屬性

　　　　當(dāng)然如果你設(shè)定了 appear-from-class 等屬性則會與進(jìn)入動畫同時執(zhí)行

再提供一個是 class 自定義初次動畫的版本,你會發(fā)現(xiàn)appear 無論如何都會調(diào)用 enter 進(jìn)入動畫,除非你不設(shè)置 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>