css - 转换在 insertAdjacentHTML 后不起作用

Question

我的 CSS 是这样的:

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

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

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

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

文本显示但没有过渡

Answer 1

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

你可以找到我刚才解释的例子:https://jsfiddle.net/w6kqscgn/

p {
  animation: appear 2s;
}

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