单击注入 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 状态。您可以通过更改类（在容器或插入的元素上）来完成此操作。