如何在同一元素上将转换延迟从一个css属性转换为另一个css属性,我想让它首先转换宽度然后转换为div元素的高度
<div class="rect"id="box2"></div>
这是CSS
.rect{
margin-top:50px;
width:10px;
height:80px;
background-color:black;
}
#box2{
transition:all 1s ease-in-out ;
-webkit-transition:all 1s ease-in-out ;
-moz-transition:all 1s ease-in-out ;
}
#box2:hover{
width:300px;
height:200px;
}
此代码使高度和宽度协同工作,#box2中的转换延迟使整个转换延迟!我该怎么办?
答案 0 :(得分:0)
据我所知,你没有。你有CSS3 transition-delay属性,我想你已经尝试过了。如果您没有找到解决方案,我的建议是使用jQuery解决方案来实现这种效果。你可以用几行代码(甚至可能比CSS中的代码少)来实现。
答案 1 :(得分:0)
#box2{
transition:width 1s ease-in-out, height 1s ease-in-out 1s ;
-webkit-transition:width 1s ease-in-out, height 1s ease-in-out 1s ;
-moz-transition:width 1s ease-in-out, height 1s ease-in-out 1s ;
}
如果这是你想要的......