javascript - 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

http://jsfiddle.net/bZcvM/

transition: height 1s;

将仅对高度进行动画处理。

您可以只使用带关闭按钮的纯 CSS(始终使用纯 CSS)

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