vue2.0 transition 多個元素巢狀使用過渡
阿新 • • 發佈:2019-01-06
在做vue的demo的時候遇到一個問題,多個巢狀的元素如何設定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.4 s 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(45 deg)
}
//js
window.onload = function(){
new Vue({
el: '#demo',
data: {
show: false
}
})
}
執行程式碼後發現這個類名的過渡:
.move-enter, .move-leave-active .in{
transform: rotate(180deg)
}
沒起作用,我開始以為這種巢狀的寫法不支援,但是後來經過多次嘗試後發現,原來transition 應用的類名不能和基本樣的類名一樣,也就是.in這個類必須換名才能起作用,所以在改動下面程式碼:
<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)
}
改完執行就ok了,實現了元素旋轉和位移。