多个效果嵌套问题,想实现平移的时候子元素同时有滚动效果
.numberBox{
position:relative;
width:72px;
height:24px;
.num-count{
position:absolute;
left:24px;
top:0;
input{
width:24px;
height:24px;
text-align:center;
}
}
.num-decrease{
position:absolute;
left:0;
top:0;
font-size:24px;
color:#00A0DC;
}
.num-add{
position:absolute;
right:0;
top:0;
font-size:24px;
color:#00A0DC;
}
}
.move-enter,.move-leave-to{
opacity:0;
transform: translateX(24px);
.num-decrease{
transform: rotate(0);
}
}
.move-enter-active,.move-leave-active{
transition: all 0.5s linear;
.num-decrease{
transition: all 0.5s linear;
}
}
.move-enter-to,.move-leave {
opacity: 1;
transform: translateX(0);
.num-decrease {
transform: rotate(180deg);
}
}
发现只有enter的时候有效果,leave的时候没有旋转效果,不知道为什么?
将0 和180deg 分别改为 180deg 和 360deg 就正常了,不明白为什么?
网友评论