這是在做項(xiàng)目時遇到的一個問題，在這里對其產(chǎn)生的原因凑保、解決辦法以及搜索資料獲得的信息進(jìn)行匯總與總結(jié)冈爹。
1.需求
想通過改變上下兩個div的高度來實(shí)現(xiàn)登錄/注冊框的展示與折疊。
2. 用 v-show 實(shí)現(xiàn)
<transition name="slide">
<div v-bind:class="{ show: isShowRegister }" class="register">
<input type="text" v-model="register.username" placeholder="用戶名">
<input type="password" v-model="register.password" @keyup.enter="onRegister" placeholder="密碼">
<p v-bind:class="{ error: register.isError }"> {{ register.notice }}</p>
<div class="button" @click="onRegister">創(chuàng)建賬號</div>
</div>
</transition>
<h3 @click="showLogin">登錄</h3>
<transition name="slide">
<div v-bind:class="{ show: isShowLogin }" class="login">
<input type="text" v-model="login.username" placeholder="輸入用戶名">
<input type="password" v-model="login.password" @keyup.enter="onLogin" placeholder="密碼">
<p v-bind:class="{ error: login.isError }"> {{ login.notice }}</p>
<div class="button" @click="onLogin"> 登錄</div>
</div>
</transition>
CSS部分
.login, .register {
padding: 0px 20px;
border-top: 1px solid #eee;
// height: 0;
overflow: hidden;
transition: height .4s;
.slide-enter-active {
animation: slide-in .5s;
}
.slide-leave-active {
animation: slide-in .5s reverse;
}
@keyframes slide-in {
0% {
height: 0px;
}
100% {
height: 200px;
}
}
...
}
效果
- 讓 css 動畫效果失效
- 登錄和注冊框會同時出現(xiàn)然后另一個消失欧引，太過僵硬频伤。
原因
v-show的本質(zhì)是利用布爾值來操控 display:none; 和 display:block; 的，display的值改變會引起HTML畫布的重繪芝此，所以是不會有動畫效果的憋肖。
3. 通過改變 height 來實(shí)現(xiàn)
由于登錄與注冊框需要來回切換因痛，所以將 v-show 改成綁定的一個 class ，通過標(biāo)志位來切換顯示哪一個岸更。
<div v-bind:class="{ show: isShowRegister }" class="register">
<div v-bind:class="{ show: isShowLogin }" class="login">
將登錄與注冊框的高度都設(shè)置為0鸵膏，通過 class="show" 來進(jìn)行切換。
.login,
.register {
padding: 0px 20px;
border-top: 1px solid #eee;
height: 0;
overflow: hidden;
transition: height .4s;
&.show {
height: 193px;
}
...
}
效果
能夠較為絲滑的展開怎炊、折疊登錄與注冊框拒担。
4. 參考與擴(kuò)展
在搜索過程中主要參考了以下博客：
Vue | 顯示切換（v-if與v-show,display,visibility與opacity）_MGsniper的博客
&符號該怎么用彻采？_Milk595的博客-CSDN博客
在看博客的同時明白了一些知識點(diǎn)响谓，在這里做些筆記陕赃。
4.1 顯示切換（v-if與v-show,display,visibility與opacity）
- v-show：實(shí)際就是根據(jù)綁定的布爾數(shù)據(jù)，對元素進(jìn)行動態(tài)添加或取消“display:none”進(jìn)行顯示切換的瓜挽。
當(dāng)節(jié)點(diǎn)的屬性為display:none時盹廷，其自身與后代節(jié)點(diǎn)不再生成盒模型以占位，但html節(jié)點(diǎn)并沒有真的被刪除久橙。
當(dāng)祖先節(jié)點(diǎn)為display:none時俄占，后代節(jié)點(diǎn)均受影響，且重寫子節(jié)點(diǎn)display屬性無效剥汤。 - v-if：與v-show不同的是颠放，v-if是根據(jù)條件渲染元素，一旦不滿足條件吭敢，元素則會直接被刪除碰凶。
- 動態(tài)綁定visibility，通過修改“visibility”屬性實(shí)現(xiàn)顯示切換鹿驼。
visibility:visibility屬性不影響元素占位欲低。hidden可讓元素生成不可見盒，元素雖不可見畜晰，但仍生成盒模型砾莱，保持占位，布局不塌陷凄鼻。
子元素默認(rèn)繼承父元素visibility屬性腊瑟，但子元素若重寫屬性，則不受父級影響块蚌。 - opacity屬性僅改變元素的透明度闰非，不影響元素的占位。
opacity屬性不可繼承峭范，但祖先元素的opacity會影響后代财松。后代元素的opacity取最小值顯示。若祖先元素opacity為0，后代為1辆毡，則0生效菜秦。若祖先為1，后代為0.5舶掖，則0.5生效球昨。
opacity屬性不影響事件觸發(fā)。
4.2 & 符號
這是less访锻、sass語法褪尝，& 表示嵌套的上一級選擇器闹获。
.border {
&.top{
margin: 5px;
}
}
.color{
border-color: green;
}
}
}
.border.top 是串聯(lián)選擇器期犬，作用在同一標(biāo)簽。
.border .color 是后代選擇器避诽，作用在不同標(biāo)簽上龟虎。
4.3 實(shí)現(xiàn)display:block“過渡動畫”
vue 數(shù)字動畫遞增_一行代碼實(shí)現(xiàn)display"過渡動畫"原理_weixin_39707478的博客-CSDN博客
大致是通過訪問特殊api來清空隊(duì)列，讓 display:block; 快速渲染沙庐，然后動畫就可以根據(jù) block 來進(jìn)行鲤妥。
