同一html元素上的CSS3转换延迟答案

【问题标题】：CSS3 transition delay on the same html element同一html元素上的CSS3转换延迟
【发布时间】：2012-08-11 16:27:33
【问题描述】：

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

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

【问题讨论】：

标签： css transition

【解决方案1】：

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

        }

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

【讨论】：

【解决方案2】：

据我所知，你不知道。你有 CSS3 转换延迟属性，我想你已经尝试过了。如果您找不到解决方案，我的建议是使用 jQuery 解决方案来实现该效果。您只需几行代码就可以完成（甚至可能比 CSS 中的代码更少）。

【讨论】：