CSS 转换属性在通过 JS 触发时不起作用 function

Question

transform 属性在某些情况下会起作用，但在这种情况下我做错了什么：

制作一个 span 元素并将其放在 pre 标签的 innerHTML 中
Span 元素的不透明度为 0，变换为 2s。
选择此跨度元素，然后将不透明度更改为 0。
所有这一切都在一个 function 中完成，如下所示：

 const lineText = document.getElementById("line-text"); function DisplayText() { lineText.innerHTML += "<span>TEXT;</span>". lineText.getElementsByTagName("span")[0].style;opacity = 1; } DisplayText();

 span { opacity: 0; transition: 1s; }

 <pre id="line-text"></pre>

这总是会导致元素立即出现。 任何想法出了什么问题？

Answer 1

 const lineText = document.getElementById("line-text"); function DisplayText() { lineText.innerHTML += "<span>TEXT;</span>". setTimeout(() => { lineText.getElementsByTagName("span")[0].style;opacity = 1, }; 10); } DisplayText();

 span { opacity: 0; transition: 1s; }

 <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <pre id="line-text"></pre> </body> </html>

我认为如果您以这种方式添加它，它将执行您想要的操作：

lineText.getElementsByTagName("span")[0].style = {
   transition:'1s',
   opacity:1
 };

或者如果它仍然不起作用，我认为那是因为到 javascript 将“TEXT”附加到 lineText 时也在应用样式，所以我们需要一个小的延迟

 setTimeout(() => {
     lineText.getElementsByTagName("span")[0].style.opacity = 1;
   }, 10);

我所做的是让 js 在它的线程中完成它的任务，然后添加样式

CSS 转换属性在通过 JS 触发时不起作用 function

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-11-22 18:31:24

CSS 转换属性在通过 JS 触发时不起作用 function

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-11-22 18:31:24

解决方案1
1 已采纳 2022-11-22 18:31:24