詳解vue2.0 transition 多個(gè)元素嵌套使用過渡
更新時(shí)間：2017年06月19日 17:13:25 作者：xqnode
這篇文章主要介紹了詳解vue2.0 transition 多個(gè)元素嵌套使用過渡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在做vue的demo的時(shí)候遇到一個(gè)問題，多個(gè)嵌套的元素如何設(shè)置transition？
我的代碼：
<div id='demo'>
<button @click="show = !show">按鈕</button>
<transition name='move'>
<div class="v-d" v-show="show">
<div class='in in_move'></div>
</div>
</transition>
</div>
//css
.v-d{
width:50px;
height:50px;
padding:10px;
transition: all 0.4s linear
}
.v-d .in{
width:30px;
height:30px;
background:#000;
transition: all 0.4s linear
}
.move-enter-active, .move-leave-active{
transition: all 0.4s linear
}
.move-enter, .move-leave-active{
opacity: 0;
transform: translateX(30px);
}
.move-enter, .move-leave-active .in{
transform: rotate(45deg)
}
//js
window.onload = function(){
new Vue({
el: '#demo',
data: {
show: false
}
})
}
運(yùn)行代碼后發(fā)現(xiàn)這個(gè)類名的過渡:
.move-enter, .move-leave-active .in{
transform: rotate(180deg)
}
沒起作用，我開始以為這種嵌套的寫法不支持，但是后來經(jīng)過多次嘗試后發(fā)現(xiàn)，原來transition 應(yīng)用的類名不能和基本樣的類名一樣，也就是.in這個(gè)類必須換名才能起作用，所以在改動(dòng)下面代碼：
<transition name='move'>
<div class="v-d">
<div class='in in_move'></div>
</div>
</transition>
.move-enter, .move-leave-active .in_move{
transform: rotate(180deg)
}
改完運(yùn)行就ok了，實(shí)現(xiàn)了元素旋轉(zhuǎn)和位移。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在vue中獲取wangeditor的html和text的操作
這篇文章主要介紹了在vue中獲取wangeditor的html和text的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue中金額、日期格式化插件@formatjs/intl的使用及說明
這篇文章主要介紹了Vue中金額、日期格式化插件@formatjs/intl的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
vue2.0使用swiper組件實(shí)現(xiàn)輪播的示例代碼
下面小編就為大家分享一篇vue2.0使用swiper組件實(shí)現(xiàn)輪播的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue中vue-cli項(xiàng)目報(bào)錯(cuò)sockjs.js報(bào)錯(cuò)問題
這篇文章主要介紹了vue中vue-cli項(xiàng)目報(bào)錯(cuò)sockjs.js報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-12-12
Vue中使用Scss實(shí)現(xiàn)配置、切換主題方式
這篇文章主要介紹了Vue中使用Scss實(shí)現(xiàn)配置、切換主題方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
解決Element ui導(dǎo)航欄選中背景色刷新消失的問題
這篇文章主要介紹了解決Element ui導(dǎo)航欄選中背景色刷新消失的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3 reactive函數(shù)用法實(shí)戰(zhàn)教程
reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法，reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新，這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下2022-11-11
基于Vue實(shí)現(xiàn)可選擇不連續(xù)的時(shí)間范圍的日期選擇器
這篇文章主要為大家詳細(xì)介紹了如何基于Vue.js實(shí)現(xiàn)一個(gè)可選擇不連續(xù)的時(shí)間范圍的日期選擇器，文中的示例代碼簡潔易懂，需要的可以參考一下2023-06-06
vue用戶長時(shí)間不操作退出到登錄頁的兩種實(shí)現(xiàn)方式
出于安全考慮，用戶長時(shí)間不操作，就回到登錄頁面，讓用戶重新登錄，本文就記錄一下實(shí)現(xiàn)這種效果的兩種方式，具有一定的參考價(jià)值，感興趣的可以了解一下2021-09-09
vue elementUI Plus實(shí)現(xiàn)拖拽流程圖的詳細(xì)代碼(不引入插件)
文章介紹了如何使用Vue和elementUI Plus實(shí)現(xiàn)一個(gè)簡單的拖拽流程圖功能,不引入任何插件,完全手寫,設(shè)計(jì)思路,感興趣的朋友跟隨小編一起看看吧2025-01-01