css - 同一html元素上的CSS3转换延迟

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 转换延迟属性，我想你已经尝试过了。如果您找不到解决方案，我的建议是使用 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 ;

        }

如果这是你想要的...