4

次の例は私の問題を説明しています: リンク: 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;
}

アニメーションを一緒に開始する必要がありますが、互いに待機しています。その種の問題を抱えている人は他に見つかりませんでした。

4

1 に答える 1

4

それらは同時に開始されますが600px、一番上の div に 's の最大高さがあるため、より速く終了します。これをより低い値に変更すると、同じ時間と期間でアニメーション化されます

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

問題は、div のサイズが 20 ピクセルしかないときに max-height を 600 に設定すると、アニメーションが 20 ピクセルではなく 1 秒で 600 ピクセルの高さにアニメートされるため、アニメーションが大幅に増加することです。

于 2013-07-30T14:45:05.257 に答える