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 Салман

你能在'body'元素上設置'overflow：hidden'，還是不能在你的情況下工作？ – 2014-08-31 18:43:43

元素如何定位......'：絕對'？ – 2014-08-31 18:44:51

身體沒有固定身高。是的，這是絕對的定位。 – 2014-08-31 18:47:53

-1

如果您想要動態更改CSS，則必須使用JavaScript或jQuery來更改DIVs屬性。

E.g

$.("#myDiv").removeClass('displayBLOCK'); 
$.("#myDiv").addClass('displayNONE'); 

CSS: 

.displayNONE{ 
display: none; 
} 

.displayBLOCK{ 
display: block; 
}

如果你只是想刪除DIV，調用$（ '＃myDiv'）。隱藏（）。您不需要將顯示屬性設置爲「無」。

來源

2014-08-31 18:54:34 anchor

好吧，這個問題沒有在'javaScript'的'jQuery'中標記。 – 2014-08-31 18:56:33

我知道，但是沒有辦法只用CSS動態地改變CSS。我很抱歉，我無法幫助你。如果你找到了方法，請發佈它，因爲我遇到類似的問題，幾個mounths前。 – anchor 2014-08-31 19:03:34

實際上有一個解決方案，在我的情況下，我可以設置'height：0;填充：0;邊界：無;溢出：隱藏「，它不會佔用滾動空間。但我希望找到一些更優雅的方式。 – 2014-08-31 19:05:45

我想嘗試設置margin如下：師

高度= X

margin-bottom: -x;

不知道這是否正常工作，但我認爲它應該。否則，你可能會使用

position: fixed;

或者第三種可能的解決方案是不讓分區滑出底部，但在左側。這是可以做到這樣的：

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

來源

2014-08-31 18:54:44 Paco

'left：-100px;'會毀掉我的上/下滑過渡。 – 2014-08-31 18:57:02

爲分區添加一個固定的位置，這是沒有javascript的唯一方法。如果你想用js，請告訴我，我會幫助:) – Paco 2014-08-31 19:00:06

這裏的東西，可能是有用的，我已經基本上通過position:fixed實現這一點，檢查這個小提琴，看看它的東西，滿足您的需求 - http://jsfiddle.net/7x0oajv2/

第二條本辦法可以使用position:absolute與overflow:hidden這樣的身體 - http://jsfiddle.net/7x0oajv2/1/

來源

2014-08-31 19:06:45 Vishu

'position：fixed'將不起作用，因爲'body'並不總是小於瀏覽器的高度。 – 2014-08-31 19:10:11

我實際上在這裏錯過了一些上下文，'position：fixed'會將你的條相對於瀏覽器窗口而不是主體，所以它的位置總是在獨立於主體高度的可見頁面的底部。你能指點我一個現場的例子或小提琴來幫助你更好地解決這個問題嗎？ – Vishu 2014-08-31 19:14:30

實際原因是，固定定位元素在某些瀏覽器上的性能非常差。在滾動的同時，它們隨着滾動一起移動，然後粘到底部。 – 2014-08-31 19:20:52

css過渡完成後延遲隱藏元素

回答

相關問題