跨像素距离的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

在考虑类名时，确保实际使用的是唯一的。"hidden"被引导程序中的一个类覆盖。css:

.hidden {
    display:none !important
}

将隐藏的更改为其他内容解决了问题。