CSS高度动画宽度错误

Question

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

Cookies warning on bottom

如果您打开我的网站，您可以看到动画从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');

Answer 1

一个简单的解决方案是设置高度：75px然后div被隐藏并给它顶部：100％而不是底部：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/