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

我会尝试将保证金设置如下：

分裂的高度= x

margin-bottom: -x;

不确定这是否有效，但我认为应该如此。否则你可以使用

position: fixed;

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

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

Answer 2

这里有一些有用的东西，我已经通过position:fixed基本实现了这一点，请检查这个小提琴，看看它是否符合您的要求 - {{3} }

第二种方法可能是position:absolute在身体上使用overflow:hidden，就像这样 - http://jsfiddle.net/7x0oajv2/

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”。

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

3 个答案: