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

他们同时开始，但因为你在顶部div上的最大高度为600px，所以它的完成速度更快。将其更改为较低的值，它们将在相同的时间和持续时间动画

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

问题在于，如果你设置的最大高度为600而div只有20像素的大，那么它会大幅增加动画效果，因为它会在1秒内动画到600px的高度，而不是20px的高度。

CSS过渡相互阻挡

1 个答案: