我如何为 innerHTML 设置动画
Posted
技术标签:
【中文标题】我如何为 innerHTML 设置动画【英文标题】：how could I animate 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，***.com/questions/16344354/… @Patrick 我看到了一些 css 动画 html.am/html-codes/marquees/css-marquee.cfm 但是我应该如何在 innerHTML 中添加如此复杂的 css 内联？ 【参考方案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 页面上返回引用？以上是关于我如何为 innerHTML 设置动画的主要内容，如果未能解决你的问题，请参考以下文章