主页 / 问题 / 1211227
Accepted
Alexei
Asked:2021-11-29 05:03:06 +0000 UTC2021-11-29 05:03:06 +0000 UTC

如何让好友显示、不透明度和过渡属性？

  • 772

我需要一个元素来顺利出现。他的原始风格：

transition: 'all 1s linear';
display: 'none';
opacity: 0;

单击时，它应该出现并变为：

display: 'block';
opacity: 1;

在我的代码中，它突然出现并且根本不顺利：

this.trigger.addEventListener('click', ()=>{
           this.popupWindow.style.display = 'block';   
           this.popupWindow.style.opacity = 1;        
 });

我找到了一个解决方案，并在 setTimeout 中以 1/1000 秒的时间隐藏了透明度（它确实看起来很流畅，如转换 css 属性中所写）：

this.trigger.addEventListener('click', ()=>{
           this.popupWindow.style.display = 'block';   
           setTimeout(()=>{this.popupWindow.style.opacity = 1}, 1); 
});

虽然我的解决方案有效，但我不喜欢它在美学上，我想找到一个更正确、更优雅、更简洁的解决方案来解决这个问题。感谢您的关注。

javascript

2 个回答

  1. Best Answer

    如果可以替换 display: none/block with height: 0/X 可以使用转换和类替换来解决

    window.onload = () => {
  var btn = document.getElementById('toggleBtn');
  var elem = document.getElementById('elem');
  
  btn.addEventListener('click', () => {
    if (elem.classList.contains('hide')) {
      elem.classList.remove('hide');
      elem.classList.add('show');
    } else {
      elem.classList.add('hide');
      elem.classList.remove('show');
    }
  });
}
    #elem {
  opacity: 1;
  height: 20px;
   overflow: hidden;
}

#elem.hide{
  height: 0;
  opacity: 0;
  transition: opacity 2s ease, height 0s ease 2s;
}

#elem.show{
  transition: opacity 2s ease, height 0s ease 0s;
}
    <div id="elem" class="show">TEXT</div>
<button id="toggleBtn">togglr</button>

    • 1 
  2. <div class="div-1">
  OPEN
  <div class="div-2">XEXE</div>
</div>

.div-2 {
  height: 0;
  background-color: #000;
  color: #fff;
  padding: 20px;
  visibility: hidden;
  transition: opacity 1s;
  opacity: 0;
}
.div-1:hover .div-2 {
  visibility: visible;
  opacity: 1;
  height: auto;
}
    • 0

相关问题