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元素。这导致我的身体有滚动。有没有什么方法可以在转换后设置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/

第二种方法可以是在身体上使用CCD_ 11和CCD_http://jsfiddle.net/7x0oajv2/1/

Answer 2

我会尝试设置如下裕度：

分割高度=x

margin-bottom: -x;

不确定这是否有效，但我认为应该。否则，您可能会使用

position: fixed;

或者第三种可能的解决方案是不要让分区从底部滑出，而是从左侧滑出。可以这样做：

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

Answer 3

如果要动态更改CSS，必须使用JavaScript或jQuery来更改div属性。

E.g

$.("#myDiv").removeClass('displayBLOCK');
$.("#myDiv").addClass('displayNONE');
CSS:
.displayNONE{
 display: none;
}
.displayBLOCK{
 display: block;
}

如果您只想删除div，请调用$。（'#myDiv'）.hide（）。您不需要将display属性设置为"none"。