Question

我有一个不透明度为0且过渡的叠加div。现在，当我使用Javascript将其不透明度设置为1时，它会逐渐淡入淡出。？

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

单击时，只显示叠加层，没有任何淡入淡出的样式。请告诉我如何解决这个问题。感谢。

Answer 1

已更新::

当您将元素从display: none移动到display: block时，您可以使用条目动画。请考虑以下代码段。我还添加了一个淡出按钮。单击此项时，您可以使用animationend事件，以便在淡出动画完成时设置display:none。

＆＃13;

(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';
  });
  

}());

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

如果您运行代码段并单击按钮，您将看到div淡入。淡入淡出是通过使用动画来创建的，该动画也用于淡化div。理想情况下，我认为你可以做到这一点，就是使用animation-direction: reverse;来进出相同的动画。

希望能帮到你！

转换的不透明度在java脚本中运行不顺畅

1 个答案: