javascript - CSS高度动画宽度错误

Question

我遇到的问题是，在我的动画上，cookies warning div我试图只为高度设置动画来做这样的事情：

底部有 Cookie 警告

如果你打开我的网站，你可以看到动画从height 0到 ，height 75px 但它也从左到右动画 (width)，为什么会这样？

我只是为高度而不是从左到右或宽度属性设置动画。

这是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');

Answer 1

一个简单的解决方案是在隐藏 div 时设置 height: 75px 并将其设置为 top: 100% 而不是 bottom: 0;

#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 之外

Answer 2

http://jsfiddle.net/bZcvM/

transition: height 1s;

只会为高度设置动画。

您可以只使用带有关闭按钮的纯 CSS（始终使用纯 CSS）

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