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

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

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

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)入與離開的動(dòng)畫 */
.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è)置了上面這樣的屬性與樣式,說明你和我一樣沒有理解這個(gè) appear " 初次 "的意思

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

其他問題與疑問 的解決

什么是" 初次 " ?

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

初次動(dòng)畫是什么?

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

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

可運(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)入與離開的動(dòng)畫 */
.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 是一個(gè)在元素默認(rèn)被顯示的情況下 調(diào)用進(jìn)入動(dòng)畫效果,使得元素在這種初次渲染情況下 執(zhí)行進(jìn)入動(dòng)畫的屬性

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

再提供一個(gè)是 class 自定義初次動(dòng)畫的版本,你會(huì)發(fā)現(xiàn)appear 無論如何都會(huì)調(diào)用 enter 進(jìn)入動(dòng)畫,除非你不設(shè)置 enter 動(dòng)畫

<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

　　在閱讀本節(jié)前請(qǐng)一定查看了 失效問題的總結(jié)部分

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

　　　　對(duì)于沒有其他動(dòng)畫需求的內(nèi)容,只需要一個(gè)進(jìn)入的特殊動(dòng)畫,我們只需要設(shè)置以下 自定義動(dòng)畫屬性即可,appear-active- 或者 使用enter動(dòng)畫,只設(shè)置appear 只是容易搞混,而且enter是會(huì)被重復(fù)使用的

　　這個(gè)屬性主要還是對(duì)頁面動(dòng)畫的一種補(bǔ)充,對(duì)于一開始在頁面顯示的元素,提供一種更加平滑的顯示,使用 enter 與 class 動(dòng)畫形式以實(shí)際環(huán)境為準(zhǔn)

　　在enter 與 class 同時(shí)設(shè)定時(shí)

　　　　enter與class會(huì)同時(shí)運(yùn)行

　　　　enter與class 有動(dòng)畫內(nèi)容沖突時(shí) enter的應(yīng)用級(jí)別高于 class 的自定義動(dòng)畫,這甚至?xí)?class的全部動(dòng)畫失效

到此這篇關(guān)于Vue3 appear 失效 如何使用 appear的文章就介紹到這了,更多相關(guān)Vue3 appear 失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論