insertAdjacentHTML [重复]后转换不起作用

Answer 1

我建议使用动画，只要动画在元素添加到 dom 时启动即可。然后，您可以动态附加具有此动画的元素，并且动画将运行。

您可以找到我刚刚解释的示例：https://jsfiddle.net/w6kqscgn/

p {
  animation: appear 2s;
}

@keyframes appear {
  from { 
    transform: translateX(-100%);
  }
}

Answer 2

插入元素然后更改变换属性以触发转换。您应该在稍微延迟后执行此操作，这就是我使用 setTimeout 的原因：

function showNoResults() {
  results.innerHTML = ''
  results.insertAdjacentHTML(
    'afterbegin',
    `<div class='no-results'>
          <h1 >No results found :(</h1>
         </div>`
  )
  setTimeout(function(){
    document.querySelector('.no-results h1').style.transform="translateX(0)";
  },1);
}

.no-results h1 {
  transform: translateX(-100%);
  transition: all 0.2s linear;
}

<div id="results"></div>

<button onclick="showNoResults()">showNoResults</button>

Answer 3

一种不同的方法是使用另一个类触发动画：

.no-results h1 {
   transform: translateX(0);
   transition: all 0.2s linear;
}
.no-results.active h1 {
   transform: translateX(-100%);
}

在 HTML 文档中插入元素：

showNoResults() {
  this.cache.results.innerHTML = ''
  this.cache.results.insertAdjacentHTML(
    'afterbegin',
    `<div id="noresults" class='no-results'>
      <h1>No results found :(</h1>
     </div>`
  )
}

要触发动画，只需在需要时将类添加到

div

元素即可：

document.getElementById("noresults").classList.add("active");