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

将 hidden 更改为其他内容解决了问题。