在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition?
我的代码:代码中元素整体做平移,里面的inner中做旋转,实现一个圆形滚动的效果
transition、transfrom属性不具备继承性
样式:
.cart-decrease{
display:inline-block;
padding:6px;
opacity:1;
transform:translate3D(0,0,0);
&.move-enter-active{
opacity:1;
transform:translate3D(0,0,0);
transition:all 0.4s linear;
}
&.move-enter{
opacity:0;
transform:translate3D(24px,0,0);
.inner{
transform: rotate(180deg)
}
}
&.move-leave{
opacity:1;
transform:translate3D(0,0,0);
}
&.move-leave-active {
opacity:0;
transform:translate3D(24px,0,0);
transition:all 0.4s linear;
.inner{
transform: rotate(180deg)
}
}
.inner{
display:inline-block;
font-size:24px;
color:rgb(0,160,220);
line-height:24px;
transition:all 0.4s linear;
}
}