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");

不幸的是，我根本没有得到过渡，只有部分弹出和弹出。我选择通过添加和删除 class 来实现它，因为这是使其响应的最简单方法。

感谢任何帮助。

Answer 1

在考虑 class 名称时，请确保您实际使用的名称是唯一的。 "hidden" 被 bootstrap.css 中的 class 覆盖：

.hidden {
    display:none !important
}

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

CSS 跨越像素距离的过渡

CSS transitions across pixel distance

css

jquery

css-transitions

twitter-bootstrap-3