如何添加CSS轉換以在自定義模式窗口上創建打開/關閉效果

我有DIV，默認display:none。它採用定義爲類overlay：如何添加CSS轉換以在自定義模式窗口上創建打開/關閉效果

.overlay 
{ 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:200; 
    width:100%; 
    height:100vh; 
    background:black; 
}

點擊一個按鈕，我只是用jQuery添加它下面的類：

.open { 
    display:block; 
}

正如你所看到的，它只是呈現爲一個完整的窗口覆蓋。

我想添加一些開啓/關閉的效果，而不是簡單地切換它的屬性，（淡入淡出或翻譯，我不知道是什麼）display屬性。

我想使用CSS轉換但如何以正確的方式添加它們？關閉時問題顯然更明顯，因爲無論如何我需要在結束轉換結束時應用display:none;。

來源

2016-09-30 Luca Detomi

這個問題可以幫助你：http://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery – adamk22

如果你不知道你想要什麼樣的影響但這太寬泛了。 –

我可以理解你在說什麼，但不同意。我要求的是一般原則，而不是完整的解決方案。主要問題是如何結合需要切換'display'和'block'來轉換其他屬性。正如在User1111的解決方案中將'z-index'從'-1'改爲看起來確切的技巧 –

.overlay { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: black; 
    opacity: 0; 
    z-index: -1; 
    transition: opacity 0.5s ease-in-out; 
} 

.open { 
    display: block; 
    opacity: 1; 
    z-index: 200; 
}

我沒有嘗試，但我在CSS3中理解的是我們不允許動畫顯示屬性。這就是爲什麼我把不透明，並試圖改變一些風格。你試一試。也許嘗試檢查gsap tweenmax。易於使用，並在性能方面更好。

來源

2016-09-30 10:02:59

非常有趣和簡單的解決方案。默認情況下，關鍵是'z-index：-1'。只是一個平庸：有必要刪除'display：none'和'display：block'。我不知道爲什麼，但使用這些屬性，透明度轉換也不起作用（至少在Firefox中） –

另外，它肯定能夠解決「開放」問題。在關閉時也需要進行轉換以將其設置爲所有屬性，例如：'transition：all 0.5s ease-in-out;' –

@LucaDetomi也許，您是對的。我一直在做的是在tweenmax中使用oncomplete函數來更改顯示值。也許只是刪除顯示，因爲您已經切換z-index。隨你便。取決於你希望你的系統如何工作。歡呼 – 2016-10-01 02:40:07

您可以使用show(x) jQuery函數，其中x是希望淡化持續的毫秒數。和.hide()來隱藏元素。

參見：http://api.jquery.com/show/ &

來源

2016-09-30 10:20:57 adamk22

我知道這一點，但正如我寫的，我想使用CSS轉換來獲得最佳性能 –

如何添加CSS轉換以在自定義模式窗口上創建打開/關閉效果

回答

相關問題