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