跨像素距离的CSS转换

Question

当我改变div的位置时，我正试图得到一个CSS转换。这是一个从页面底部弹出的水平形式。

HTML:

<div class="admin-bar hidden" id="quick-access">
    <div class="admin-bar-inner">
        // form content

CSS:

.page-content .admin-bar {
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    width: 100%;
}

.page-content .hidden {
    bottom: -140px;
}

#quick-access {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

JS:

// to view the form
$('#raiseForm').on( "click",function() {
    $("#quick-access").removeClass("hidden");
});

// on submit or cancel
$("#quick-access").addClass("hidden");

不幸的是，我根本没有得到过渡，只是那部分突然出现。我选择通过添加-移除类来实现这一点，因为这是使类响应的最简单方法。

任何帮助都是非常感谢的。

Answer 1

在考虑类名时，确保您使用的是唯一的。“隐藏”被bootstrap.css中的一个类覆盖：

.hidden {
    display:none !important
}

把隐藏的东西变成别的东西解决了问题。