javascript - 不触发显示 block 和 css 转换的解决方法

Question

对于这个问题的这么多更新，我很抱歉，我很高兴每个人都试图帮助我。我认为下面有一个更清晰的理解这个问题的方法:

如果您在更改附加过渡的属性之前立即将元素的显示属性设置为 block ，则 CSS 过渡将不适用。考虑以下代码:

CSS:

#creative {
    display: none;
    opacity: 0;
    transition: opacity 0.5s; 
}

HTML:

<div id="creative">
    <span>Sample text</span>
</div>

Javascript:

var dom = {};
dom.creative = document.getElementById('creative');
dom.creative.style.display = 'block';
dom.creative.style.opacity = 1;

该元素将正确显示，但没有任何过渡。此问题的解决方法是通过访问元素的视觉属性之一强制重绘:

dom.creative.style.display = 'block';
var a = dom.creative.offsetHeight; /* <-- forces repaint */
dom.creative.style.opacity = 1;

有什么好的解决办法吗？好的，我的意思是每次我需要更改显示属性和附加过渡的属性时，不要添加额外的 javascript 代码行。

Answer 1

根据您在问题中提供的代码，我将在这里采用完全不同的方式，并使用 animation 代替，这将使整个 repaint 问题消失离开

更新了一个脚本，将 div 设置为 display: block

var dom = {};
dom.creative = document.getElementById('creative');
dom.creative.style.display = 'none';

var butt = document.getElementById('button');
butt.addEventListener('click', function(e) {
  
  if (dom.creative.style.display == 'block') {
    dom.creative.style.display = 'none';    
  } else {
    dom.creative.style.display = 'block';
  }

})

#creative {
  display: none;
  opacity: 0;
  animation: opac 1s forwards;
  margin: 20px;
}
@keyframes opac {
  100% {
    opacity: 1;
  }
}
button {
  margin: 20px;
}

<button id="button">Toggle display</button>

<div id="creative">
  <span>Sample text</span>
</div>

如果不需要 display: none，可以使用 transition 并像这样简单地切换一个类

var dom = {};
dom.creative = document.getElementById('creative');

var butt = document.getElementById('button');
butt.addEventListener('click', function(e) {
  
  dom.creative.classList.toggle('show');

})

#creative {
  opacity: 0;
  transition: opacity 1s;
  margin: 20px;
}
#creative.show {
  opacity: 1;
  transition: opacity 1s;
}
button {
  margin: 20px;
}

<button id="button">Toggle display</button>

<div id="creative">
  <span>Sample text</span>
</div>

对于transition，除了offsetHeight和setTimeout方案外，还有3:rd，视觉效果一样作为切换显示 block /无，将高度/宽度设置为 0。

var dom = {};
dom.creative = document.getElementById('creative');

var butt = document.getElementById('button');
butt.addEventListener('click', function(e) {
  
  dom.creative.classList.toggle('show');

})

#creative {
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 1s, width 0s 1s;
  margin: 20px 0;
}
#creative.show {
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 1s, width 0s;
}
button {
  margin: 20px 0;
}

<button id="button">Toggle display</button>

<div id="creative">
  <span>Sample text</span>
</div>

<div>Other content</div>