隱藏模式並使用CSS3轉換顯示

我正在嘗試構建一個小模式插件，但我正在努力尋找隱藏模式並能夠使用僅CSS3轉換淡入/淡出的方式。隱藏模式並使用CSS3轉換顯示

顯然，我不能使用display：none來繼承和使用不透明度，而且可見性不是一個選項，因爲內容仍然在技術上存在，它只是不能被看到，所以它會阻止它下面的元素被使用（按鈕等）

所以我的想法是使用jQuery在display：hidden和inherit之間切換，然後使用jQuery添加一個'shown'類來觸發轉換。但它不起作用。我只是得到一個即時演出（就像背後的黑屏元素一樣）。雖然CSS轉換工作正常，但我已經測試過它們沒有「顯示」的東西。

我的jQuery至今：

// Modal open trigger 
$('.modal-trigger').click(function() { 
    modal = $('#' + $(this).data('modal-trigger')); 
    modal.css({'display':'inherit'}).addClass('modal-show'); 
    $('#blackout').css({'display':'inherit'}).addClass('show'); 
});

任何想法？

來源

2014-02-07 twistedpixel

如果在應用轉換時隱藏元素（display: none），則CSS轉換不會生效。此外，JavaScript函數中CSS更改順序無關緊要，瀏覽器將一次性計算它們。

一個快速解決方案是強制瀏覽器先處理display更改，然後再更改transition。

試試這個：

modal.css({'display':'inherit'}); 
setTimeout(function(){ modal.addClass('modal-show'); }, 0);

另一種方法是避免使用display: none可言。使用：

.hide 
{ 
    opacity: 0; 
    pointer-events: none; 
} 

.show 
{ 
    opacity: 1; 
    pointer-events: auto; 
}

pointer-events允許該元素不可見，但不會通過吞嚥鼠標事件而產生干擾。你應該避免使用這個，除了小的審美因素，因爲元素可能仍然會干擾表格標籤排序。另外，如果你在意這一點，IE對該屬性的支持只能來自IE 11。

來源

2014-02-07 17:18:01 Nevett

非常好。我實際上在類似的問題中使用了指針事件（「跳回頂部」按鈕）。也許我只是迂腐，但我真的不喜歡這個元素仍然存在的想法。你懂？然而你的超時解決方案看起來ace我會試試看看我喜歡它！ – twistedpixel

我同意。我可能不會在你的情況下使用該選項。我相信它也有一些性能影響，因爲除非有一些巧妙的優化，否則瀏覽器仍然需要完成大部分渲染工作。但對於這裏和那裏的奇怪效果來說，這是一個不錯的選擇。 – Nevett

工程像魔術，很乾淨 - 非常感謝！我也喜歡這個理論 - 我不知道不適用於隱藏元素的轉換。這真的幫助我理解*爲什麼*發生這個問題，我認爲這是解決問題的一個非常重要的部分。 – twistedpixel

了我的頭頂部的最好的解決辦法是使用jQuery的內置動畫

modal.fadeOut();

使用香草CSS並不容易。看看這個問題：Transitions on the display: property。

來源

2014-02-07 17:13:13

如果我過於簡單化，請提前致歉，但是您是否嘗試過使用fadeToggle()？

這是我使用的顯示和隱藏模態堆棧：

function modalShow(){ 
    $(".modal-window").fadeToggle(200); 
    return false; 
} 

function modalHide(){ 
    $(".modal-window").toggle(); 
    return false; 
} 

$(document).ready(function() { 
    $("#close-modal").click(modalHide); 
});

希望它能幫助。乾杯。

來源

2014-02-07 17:17:39 Marcello

我一直在使用jQuery了一段時間，我很熟悉它的JavaScript過渡，但我真的想前進，只使用CSS3轉換。硬件加速轉換非常好，據我所知，jQuery不使用CSS3轉換呢？ – twistedpixel

可以將過渡，而不是顯示屬性中的「可視性」屬性

在這裏看到： http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

.md-modal { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 50%; 
    max-width: 630px; 
    min-width: 320px; 
    height: auto; 
    z-index: 2000; 
    visibility: hidden; 
    backface-visibility: hidden; 
    transform: translateX(-50%) translateY(-50%); 
} 

.md-show { 
    visibility: visible; 
} 

.md-overlay { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    visibility: hidden; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
    opacity: 0; 
    background: rgba(143,27,15,0.8); 
    transition: all 0.3s; 
} 

.md-show ~ .md-overlay { 
    opacity: 1; 
    visibility: visible; 
}

來源

2016-01-26 07:12:57

隱藏模式並使用CSS3轉換顯示

回答

相關問題