jQuery css（）意外触发动画

Question

我想让div向下滑动top:0，但我不知道它的高度。所以我使用jQuery来获取它的高度而不显示它，然后在添加类(0-height)之前将其移动到open，这将动画显示为视图。

CSS

.settings-dropdown
{
    display:none;
    position:fixed;
    width:100%;
    padding:5% 2%;
    left:0;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition:    all 0.8s ease-in-out;
    -ms-transition:     all 0.8s ease-in-out;
    -o-transition:      all 0.8s ease-in-out;
    transition:         all 0.8s ease-in-out;
}
.settings-dropdown.open
{
    display:block;
    top:0;
}

JS

var height = $('div.settings-dropdown').outerHeight();
$('div.settings-dropdown').css({'height':height,'top':(0-height)}).addClass('open');

问题是，jQuery.css()在我用它定义top位置时触发动画。所以我要么等待0.8秒才能添加open类，或者......究竟是什么？