单击注入 HTML 的按钮时，如何使 div 内容以动画显示？

Question

我目前正在自己学习一些 CSS 和 JS，我被困在我真正想做的部分，但很难在网上找到正确的答案，因为似乎有很多方法，但我无法做出任何他们工作。这是我的想法的一个片段：let htmlcontent = `<p>It's me again!</p>`;function animation() {  let content = document.getElementById("content");  content.innerHTML = "";  content.innerHTML = htmlcontent;}#content p {  font-size: 100px;}<div id="content">  <p>  Hello world!  </p></div><button onclick="animation()">  Click here</button>这个想法是，当我单击按钮时，旧内容会被新的 HTML 内容替换，并且我希望每次单击按钮时新内容都会从右侧淡入（过渡）。如果我的问题不好/奇怪，我很抱歉，英语不是我的主要语言，而且我目前没有其他人可以问。感谢您的耐心等待。

Answer 1

您可以制作一个 CSS动画，并在单击按钮时播放该动画。

let htmlcontent = `<p>It's me again!</p>`;

let content = document.getElementById("content");

function animation() {

  content.innerHTML = htmlcontent;

  

  content.classList.add("animate");

  

  setTimeout(function() {

    content.classList.remove("animate");

  }, 500); // 500 is the same time as the CSS animation

}

#content p {

  font-size: 100px;

}

.animate {

  animation: fadeIn 500ms ease-out backwards;

}

@keyframes fadeIn {

  from {

    transform: translateX(250px);

    opacity: 0;

  }

  to {

    transform: translateX(0px);

    opacity: 1;

  }

}

<div id="content">

  <p>

  Hello world!

  </p>

</div>

<button onclick="animation()">

  Click here

</button>

Answer 2

要触发 CSS 转换，请在插入 HTML后更改 CSS 状态。您可以通过更改类（在容器或插入的元素上）来完成此操作。