不透明與轉換不運行平穩在java腳本

Question

我有一個覆蓋div與不透明度0和過渡。現在，當我使用Javascript將它設置爲不透明度爲1時，它漸漸淡入。

MoniqueDiv.style.display = 'block'; 
    MoniqueDiv.style.opacity = '1'; 

單擊時只顯示疊加而不會有任何淡入淡出的風格。 請告訴我如何解決這個問題。 謝謝。

Answer 1

修訂::

如你的元素從display: none移動到display: block你可以使用一個條目動畫的可能。考慮下面的片段。我還添加了一個淡出按鈕。當淡出動畫完成時，單擊此按鈕可以使用animationend事件設置display:none。

(function(){ 
 
    var fadeIn = document.querySelector('.fade__in'), 
 
     fadeOut = document.querySelector('.fade__out'), 
 
     div  = document.querySelector('div'); 
 
    fadeIn.addEventListener('click', function() { 
 
    div.className  = 'fading-in'; 
 
    div.style.display = 'block'; 
 
    }); 
 
    fadeOut.addEventListener('click', function() { 
 
    var hideEl = function() { 
 
     div.style.display = 'none'; 
 
     div.removeEventListener('animationend', hideEl); 
 
    }; 
 
    div.addEventListener('animationend', hideEl); 
 
    div.className = ' fading-out'; 
 
    }); 
 
    
 

 
}());

div { 
 
    display: none; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: black; 
 
} 
 
.fading-in { 
 
    animation: fadeIn 1s; 
 
    -webkit-animation: fadeIn 1s; 
 
} 
 
.fading-out { 
 
    animation: fadeOut 1s; 
 
    -webkit-animation: fadeOut 1s; 
 
} 
 
@keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
@-webkit-keyframes fadeIn { 
 
from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes fadeOut { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
} 
 
@-webkit-keyframes fadeOut { 
 
from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
}

<div></div> 
 
<button class="fade__in">Fade in</button> 
 
<button class="fade__out">Fade out</button>

如果您運行的代碼片斷，然後點擊你會看到在div淡出按鈕。通過使用也被用來淡化股利背出動畫的淡入淡出創建。理想情況下，我認爲你可以這樣做，就是使用animation-direction: reverse;來使用相同的動畫進出。

希望能幫助你！