vue2.0 transition 多个元素嵌套使用过渡

在做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;
}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值