css轉換不透明不工作，其中元素有顯示：none然後更改爲顯示：塊

喜歡標題說。我有這樣的代碼：https://jsfiddle.net/fwo9ym1o/css轉換不透明不工作，其中元素有顯示：none然後更改爲顯示：塊

//javascript 
    var container = document.querySelector("#container"); 

    container.style.display = "block"; 

    //this is not working 
    //container.style.opacity = 1; 


    //this is working 
    setTimeout(function() { 
     container.style.opacity = 1; 
    }, 0); 

/css 
    .container { 
     height: 200px; 
     width: 200px; 
     background-color: salmon; 
     display: none; 
     border-radius: 5px; 
     opacity: 0; 
     transition: opacity 2s ease-in-out; 
    } 

//html 
    <div id="container" class="container"></div>

所以，我已經改變了container.style.display = "block";然後應用container.style.opacity = 1;和過渡沒有發生。

它工作，如果我在一個新的線程中運行的一切。

注意：我無法使用可視性。它必須顯示：無

來源

2016-09-17 Doua Beri

_「和過渡是不會發生」 _預期的結果是在鉻和Firefox訪問的jsfiddle返回。你在哪個瀏覽器中嘗試過'css'，'javascript'？ – guest271314

它工作，如果我使用setTimout，如果你取消注意它不起作用 –

使用'setTimeout'有什麼問題？ – guest271314

這是因爲樣式想出辦法。樣式變化很昂貴，所以它們被有效地保存起來直到它們被需要（像.offsetHeight這樣的重新檢查檢查被調用或者需要繪製下一個框架）。

下面的代碼應該可以工作。它包括的內容（我認爲）是怎麼回事的解釋：

container.style.display = "block"; 
// container is actually still invisible 
// current style hasn't been calculated 

container.offsetHeight; 
// this forces a style recalc 
// so the current style for the container is figured out. 
// without this recalc, this element effectively has no style, 
// and so when you transition from its current style (null) to a different one (opacity: 1), it just snaps to the new value. 

container.style.opacity = 1; 
// this triggers the transition. 
// because the style was recalced before the transition was triggered, 
// it will transition _from_ those values.

jsFiddle

來源

2016-09-17 15:54:09 Whothehellisthat

謝謝，已經使用getComputedStyle（容器）.opacity發現了類似的東西; –

哦。這只是給你最新的風格。我想它會做同樣的事情，但我想這會更昂貴。由你決定。 – Whothehellisthat

@Whathehellisthat這個答案讓我擺脫了麻煩。就我而言，我通過設置屬性來觸發CSS轉換。序列簡單地變成了'container.style.display ='block'; container.offsetHeight; container.setAttribute（成才， ''）'。謝謝。 – Manngo

試試這個：

var container = document.querySelector("#container"); 
container.style.opacity = 1; 

<div id="container" class="container"></div> 

.container { 
height: 200px; 
width: 200px; 
background-color: salmon; 
display: block; 
border-radius: 5px; 
opacity: 0; 
transition: opacity 2s ease-in-out; 
}

JSFiddle

來源

2016-09-17 15:48:57 bbonch

謝謝。但喜歡標題說。容器需要顯示：在開始時沒有。 –

我建議你使用animation相反，它是不是強制重繪更爲合適。

var container = document.querySelector("#container"); 
 
container.classList.add('animateme');

.container { 
 
    display: none; 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: red; 
 
} 
 

 
.animateme { 
 
    display: block; 
 
    animation: animate 2s linear; 
 
} 
 

 
@keyframes animate { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<div id="container" class="container"></div>

來源

2016-09-17 17:09:58 LGSon

儘管標有「正確」答案我投了答案from LGSon above由於它是不是一個解決方法，但採用天然CSS能力。

由於易於切換類（container.classList.toggle('animateme')）和關注點分離（JS不直接操作CSS屬性），它在JS中提供了更乾淨的代碼。

但是，我經歷了動畫animate在最終的零關鍵幀處被重置，即到opacity: 0;

爲了讓留我加animation-fill-mode: forwards;到.animateme選擇這樣（從this stackoverflow answer拍攝）

.animateme { 
    display: block; 
    animation: animate 2s linear; 
    animation-fill-mode: forwards; 
}

來源

2017-03-09 09:32:20

css轉換不透明不工作，其中元素有顯示：none然後更改爲顯示：塊

回答

相關問題