html 延迟div延迟消失,css过渡完成后延迟隐藏元素

有几个类似的问题。但这里有一点变化。css过渡完成后延迟隐藏元素

我正在使用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;

}

2014-08-31

Салман

+0

你能在'body'元素上设置'overflow：hidden'，还是不能在你的情况下工作？ –

2014-08-31 18:43:43

+0

元素如何定位......'：绝对'？ –

2014-08-31 18:44:51

+0

身体没有固定身高。是的，这是绝对的定位。 –

2014-08-31 18:47:53