Question

如何在同一元素上将转换延迟从一个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中的转换延迟使整个转换延迟！我该怎么办？

这是示例http://jsfiddle.net/bBnQW/

Answer 1

据我所知，你没有。你有CSS3 transition-delay属性，我想你已经尝试过了。如果您没有找到解决方案，我的建议是使用jQuery解决方案来实现这种效果。你可以用几行代码（甚至可能比CSS中的代码少）来实现。

Answer 2

#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 ;

        }

如果这是你想要的......

CSS3转换延迟在同一个html元素上

2 个答案: