2

私が抱えている問題は、のアニメーションでcookies warning div、高さをアニメーション化して次のようなことをしようとしていることです:

下部の Cookie 警告

私のウェブサイトを開くと、アニメーションが からheight 0に移動するのがわかりますがheight 75px 、左から右 (幅) にもアニメーション化されますが、なぜそうなっているのでしょうか?

左から右、または幅のプロパティではなく、高さをアニメーション化しています。

ここに画像の説明を入力

これはCSSです：

    #cookiesWarning {
        background: #fff;
        -webkit-box-shadow: 0 0 35px #888;
        box-shadow: 0 0 35px #888;
        -webkit-transition: all 1.5s ease;
        -moz-transition: all 1.5s ease;
        transition: all 1.5s ease;
        height: 0px;
        position: fixed!important;
        z-index: 99999998!important;
        left: 0!important;
        width: 100%!important;
        bottom: 0;
    }
    #cookiesWarning.active {
        height: 75px;
    }

そしてスクリプト：

$('#cookiesWarning').addClass('active');
4

2 に答える 2

1

簡単な解決策は、div が非表示のときに height: 75px を設定し、bottom: 0 の代わりに top: 100% を設定することです。

#cookiesWarning {
    background: #fff;
    -webkit-box-shadow: 0 0 35px #888;
    box-shadow: 0 0 35px #888;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    transition: all 1.5s ease;
    height: 0px;
    position: fixed!important;
    z-index: 99999998!important;
    left: 0!important;
    width: 100%!important;
    top: 100%;
}

#cookiesWarning.active {
    top: auto;
    bottom: 0
}

そうすれば、divの外にあるため非表示になります

于 2013-09-05T12:10:12.930 に答える
1

http://jsfiddle.net/bZcvM/

transition: height 1s;

高さだけをアニメーション化します。

閉じるボタンで純粋な CSS のみを使用できます (常に純粋な CSS で)。

http://jsfiddle.net/bZcvM/2/

于 2013-09-05T12:15:52.447 に答える