css - CSS 过渡相互阻塞

Question

以下示例解释了我的问题：链接：http: //jsfiddle.net/sTFT3/1/

HTML

<div class="parent">
<img src="http://farm8.staticflickr.com/7292/9388249554_18f230a0ce_z.jpg" class="image"/>
<img src="http://farm3.staticflickr.com/2814/9389265805_1fd4040203_z.jpg"/>
<span class="text">Lorem Ipsum</span>
</div>

CSS

.parent {
    position: relative
}
.parent .text {
    position: absolute;
    top: 0;
    left: 0;
    background: #ccc;
    width: 80%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition : max-height 1s linear 0s;
    -moz-transition : max-height 1s linear 0s;
    -ms-transition : max-height 1s linear 0s;
    -o-transition : max-height 1s linear 0s;
    transition : max-height 1s linear 0s;
}
.image {
    position: absolute;
    opacity: 0;
    -webkit-transition : opacity 1s ease-in 0s;
    -moz-transition    : opacity 1s ease-in 0s;
    -ms-transition     : opacity 1s ease-in 0s;
    -o-transition      : opacity 1s ease-in 0s;
    transition         : opacity 1s ease-in 0s;
}

.parent:hover .text {
    max-height: 600px;
}

.parent:hover .image {
    opacity: 1;
}

我需要动画一起开始，但他们正在等待对方。找不到其他有这种问题的人。

Answer 1

600px它们同时开始，但是因为您在顶部 div 上有一个 's 的最大高度，所以它完成得更快。将此更改为较低的值，它们将在同一时间和持续时间内进行动画处理

http://jsfiddle.net/sTFT3/2/

问题是，如果你在 div 只有 20 px 的情况下设置 max-height 为 600，它会大幅增加动画，因为它会在 1 秒内动画到 600px 的高度，而不是 20px 的高度。