html - css 转换完成后延迟隐藏元素

Question

周围有几个类似的问题。但这里有一点变化。

我正在使用 CSS3 transition 在页面底部显示一个小的 div。当我设置类 .show 时，它会向上滑动，当我删除它时，它会向下滑动并离开页面。

.bar {
    transition: bottom 0.3s ease-out, opacity 0.3s;
    opacity: 0;
    bottom: -44px;
}

.bar.show {
    opacity: 0.85;
    bottom: 0;
    transition: bottom 0.3s ease-out, opacity 0.3s;
}

我的问题是，虽然它消失了，但它仍然是一个 display:block 元素。这导致我的 body 有滚动。有什么方法可以在转换后设置 display:none (仅使用 CSS)？或者一些如何说服 body 没有滚动？ (我已经有 overflow: hidden)。

因为 transition-delay 对 display 属性不起作用。我尝试了可见性，但浏览器仍然保留了一些滚动空间。

更新: 以防万一我们找不到任何好的解决方案，我现在已经这样做了，而不是 display: none。

.bar {
    transition: max-height 0s linear 0.3s, bottom 0.3s ease-out, opacity 0.3s;
    opacity: 0;
    bottom: -44px;
    max-height: 0;
    overflow: hidden;
    border-top-width: 0;
    padding: 0;
}

.bar.show {
    opacity: 0.85;
    bottom: 0;
    max-height: 50px;
    padding: 5px;
    border-top-width: 1px;
    transition: bottom 0.3s ease-out, opacity 0.3s;
}

Answer 1

这里有一些可能有用的东西，我基本上是通过 position:fixed 实现的，检查这个 fiddle 看看它是否满足您的要求 - http://jsfiddle.net/7x0oajv2/

第二种方法可以使用 position:absolute 和 body 上的 overflow:hidden 就像这样 - http://jsfiddle.net/7x0oajv2/1/