vue中appear的用法
關(guān)于appear的用法和enter的用法相似，它只是在第一次渲染的時(shí)候才會(huì)起作用。看完整的代碼：
別忘了引用vue.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始渲染的過渡</title>
<script src="vue.js"></script>
</head>
<style>
.custom-appear-active{
color: #2fe26d;
background: #b6b6b6;
transition: all 1s ease;
}
.custom-appear{
font-size: 40px;
color: #e069e2;
background: #7798e2;
}
.custom-appear-to{
color: #e29138;
background: #1c8942;
}
</style>
<body>
<div id="app">
<transition
appear
appear-class="custom-appear"
appear-to-class="custom-appear-to"
appear-active-class="custom-appear-active"
>
<p>appear</p>
</transition>
</div>
<script>
new Vue({
el: "#app"
})
</script>
</body>
</html>
但是這里有一些問題：關(guān)于appear-class、 appear-to-class、 appear-active-class的相同屬性那個(gè)起作用的問題。
四種情況：（與他們在style中的排列順序有關(guān)系）
1、appear-class、 appear-to-class、 appear-active-class或者 appear-to-class、appear-class、 appear-active-class的排列順序，此時(shí)只有appear-active-class的屬性起作用。
2、appear-active-class、appear-class、 appear-to-class
此時(shí)appear-active-class的不起作用，由appear-class過渡到appear-to-class屬性。
3、appear-class、appear-active-class、 appear-to-class
此時(shí)appear-class屬性不起作用，由appear-active-class過渡到 appear-to-class屬性。
4、 appear-to-class、 appear-active-class、appear-class
此時(shí)appear-to-class不起作用，由appear-class過渡到 appear-active-class屬性。
enter也有相似的問題
總結(jié)
以上所述是小編給大家介紹的vue中appear的用法，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue-cli中的babel配置文件.babelrc實(shí)例詳解
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。本文介紹vue-cli腳手架工具根目錄的babelrc配置文件，感興趣的朋友一起看看吧2018-02-02
vue項(xiàng)目中監(jiān)聽手機(jī)物理返回鍵的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目中監(jiān)聽手機(jī)物理返回鍵的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
vue大屏自適應(yīng)的實(shí)現(xiàn)方法(cv就能用)
最近在用VUE寫大屏頁面,遇到屏幕自適應(yīng)問題,下面這篇文章主要給大家介紹了關(guān)于vue大屏自適應(yīng)的實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例
本文主要介紹了ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue如何實(shí)現(xiàn)u-form多個(gè)form表單同時(shí)校驗(yàn)
在 Vue 項(xiàng)目中使用 UView UI 的 u-form 組件時(shí),多個(gè)表單同時(shí)校驗(yàn)的需求非常常見,本文主要介紹了如何使用 u-form 組件實(shí)現(xiàn)多個(gè)表單同時(shí)校驗(yàn),需要的可以參考一下2025-01-01
Vant?Weapp組件picker選擇器初始默認(rèn)選中問題
這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認(rèn)選中問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log
console.log一般都是在開發(fā)環(huán)境下使用的,在生產(chǎn)環(huán)境下需要去除?,本文主要介紹了vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu)。本文將利用Vue實(shí)現(xiàn)簡單的骨架屏，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
Vue使用Antd中a-table實(shí)現(xiàn)表格數(shù)據(jù)列合并展示示例代碼
文章介紹了如何在Vue中使用Ant?Design的a-table組件實(shí)現(xiàn)表格數(shù)據(jù)列合并展示,通過處理函數(shù)對(duì)源碼數(shù)據(jù)進(jìn)行操作,處理相同數(shù)據(jù)時(shí)合并列單元格2024-11-11