不透明与转换不运行平稳在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;来使用相同的动画进出。

希望能帮助你！