我如何为 innerHTML 设置动画答案

【问题标题】：how could I animate innerHTML我如何为 innerHTML 设置动画
【发布时间】：2020-10-06 17:29:58
【问题描述】：

我希望为下面的“这是不允许的”文本设置动画。

 document.getElementById("ve").innerHTML = '<p  style="text-align:center"><h1><span style="color:blue">This is  </span><span style="color:red">NOT allowed</span><span style="color:blue">. </span></h1></p>';

不幸的是，我必须在 java 脚本中使用 innerHTML。没有 HTML 页面。 java 脚本动态生成 HTML，因此我无法访问 HTML 页面。我想为文本动画淡入或一些简单的反弹。因为它是一个 javascript 文件，所以我无权访问 css 文件（或者我错了吗？）。我正在寻找更少的代码和非常简单的机制。一个想法是我可以通过复制粘贴显示 innerHTML 来模拟闪烁，将其设置为“”，然后每 1 秒再次显示一次。有什么优雅的方法吗？我不能使用像 jQuery 这样的任何 javascript 框架。

注意*：我复制粘贴代码以将值分配给 innerHTML，并将其设置为每 2 秒“”，闪烁效果不会发生。所以这个选项被排除了，我猜。我是具有丰富后端经验的 UI nube :(

编辑** 我决定使用@JoshB 的答案。它可以工作并且更清洁。 HTML 标签和动画是明确分开的。我的目标是患有某些疾病的人。我是一个 0/10，我想要更简单的愚蠢解决方案。感谢您的帮助。

【问题讨论】：

你好，你想做什么样的动画？您是否创建了元素“ve”？
您可以使用 css-transitions 制作此类动画。如果不能使用 css 文件，可以使用 javascript 添加 css 规则。
@RobertoVargas：我的观众是看到高对比度颜色的老年人。因此动画但不会分心。任何像 25px 一样抖动/移动文本的东西都是好的。我每 2 秒管理一次 div show-hide-show-hide 模式，但解决方案不够优雅。如果文本被隐藏，我的观众很可能会错过看到文本。也许我可以在黄色背景上显示文字，但一点点动作就会吸引我的观众的注意力。
使用css，stackoverflow.com/questions/16344354/…
@Patrick 我看到了一些 css 动画 html.am/html-codes/marquees/css-marquee.cfm 但是我应该如何在 innerHTML 中添加如此复杂的 css 内联？

标签： javascript html

【解决方案1】：

您实际上可以通过 JavaScript 中的 DOM CSS 更改文本的外观。我决定最简单的方法是使用setTimeout 进行循环以实现最终目标。

<!DOCTYPE html>
<html>
<head>
	<title>TEST</title>
</head>
<body>
<p id="ve">Example Text</p>
<script>
	state = "off";
	function blinkText() {
		if (state == "on") {
			state = "off";
			document.getElementById("ve").style.visibility = "visible";
			setTimeout(blinkText, 1000);
		} else {
			state = "on";
			document.getElementById("ve").style.visibility = "hidden";
			setTimeout(blinkText, 1000);
		}
	}
	blinkText();
</script>
</body>
</html>

这基本上每秒打开和关闭文本的可见性。时间，以毫秒为单位，可以通过setTimeout函数中的第二个参数进行修改。我希望这可以帮助您解决问题！

【讨论】：

是的，这很好用。比我笨拙的代码干净得多。

【解决方案2】：

您可以向您的 innerHTML 添加更多内容。

例如，如果您想添加淡入效果，您可以从使用“不透明度：0”将文本设置为不可见开始
您还可以添加一个过渡，以准备使用“transition: opacity 1s”更改该值。
然后，您将使用 javascript 来获取对该 DOM 节点的引用。获得对该 DOM 节点的引用后，您可以通过更改节点的 style.opacity 值来更改 opacity 的值。

放在一起，它看起来像：

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById("ve").innerHTML = '<p style="text-align:center"><h1 id="fadein" style="opacity: 0; transition: opacity 1s"><span style="color:blue">This is  </span><span style="color:red">NOT allowed</span><span style="color:blue">. </span></h1></p>';

  const fadein = document.getElementById("fadein");
  setTimeout(() => {
    fadein.style.opacity = "1";
  }, 0);
});

超时的原因与页面渲染的顺序和javascript代码的运行顺序有关。

【讨论】：

我取消了我的代码的注释并使用了你的。它不起作用，即使我认为它应该。由于大小，我无法在此处复制粘贴这两个代码。
document.getElementById("ve") 是否在您的 html 页面上返回引用？