javascript - vue過(guò)渡效果 css過(guò)渡 類名的先后順序
問(wèn)題描述
給一個(gè)元素設(shè)計(jì)過(guò)渡,理想效果是出現(xiàn)時(shí)高度遞增,消失是高度遞減。設(shè)計(jì)的代碼如下:
.collapse-enter-active, .collapse-leave-active { transition: height .5s;}.collapse-enter, .collapse-leave-active { height: 0;}.collapse-leave { height: 100px;} .collapse-enter-active { height: 100px;}
結(jié)果元素出現(xiàn)時(shí),高度直接到達(dá)100px,消失時(shí)正常,修改代碼的順序如下:
.collapse-enter-active, .collapse-leave-active { transition: height .5s;}.collapse-enter-active { height: 100px;}.collapse-enter, .collapse-leave-active { height: 0;}.collapse-leave { height: 100px;}
問(wèn)題解決了,不明白順序?yàn)槭裁磿?huì)造成影響,過(guò)渡效果不是在通過(guò)切換css來(lái)實(shí)現(xiàn)的么,應(yīng)該不是覆蓋的問(wèn)題吧?具體效果可以點(diǎn)擊查看 jsbin
問(wèn)題解答
回答1:@CRIMX 的答案已經(jīng)講清楚了,本質(zhì)上就是 enter 和 enter active 兩個(gè)類會(huì)在第一幀同時(shí)存在于動(dòng)畫(huà)元素上,而后通過(guò)移除 enter 類執(zhí)行動(dòng)畫(huà),因此不能讓 active 類的樣式提前生效。
兩個(gè)類的方式雖然足以完成動(dòng)畫(huà),但確實(shí)不太容易理解,所以 vue 2.1.8 開(kāi)始增加了 to 的類名,可以將動(dòng)畫(huà)的結(jié)束態(tài)從 active 類中剝離出來(lái),更方便理解,避免產(chǎn)生順序覆蓋問(wèn)題。
回答2:在元素被插入時(shí) v-enter 和 v-enter-active 同時(shí)生效的,前者在下一幀移除,后者在動(dòng)畫(huà)完成后移除。所以 v-enter-active 要寫(xiě)在前面。leave 也一樣。
回答3:這個(gè)真是挺奇怪的, 下次寫(xiě)把a(bǔ)ctive寫(xiě)前面, 坐等高人來(lái)解惑
回答4:你可以看一下官網(wǎng)給的解釋,說(shuō)的很詳細(xì):https://cn.vuejs.org/v2/guide/transitions.html#過(guò)渡的-CSS-類名
相關(guān)文章:
1. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個(gè)是怎么回事????2. macos - mac下docker如何設(shè)置代理3. docker - 如何修改運(yùn)行中容器的配置4. docker gitlab 如何git clone?5. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問(wèn)題。7. javascript - 連續(xù)點(diǎn)擊觸發(fā)mouseleave事件8. debian - docker依賴的aufs-tools源碼哪里可以找到???9. docker start -a dockername 老是卡住,什么情況?10. dockerfile - 我用docker build的時(shí)候出現(xiàn)下邊問(wèn)題 麻煩幫我看一下

網(wǎng)公網(wǎng)安備