通过 JS 函数触发时，CSS 转换属性不起作用

Question

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

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

   HTML:

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

   CSS：

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

   记者：

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

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

Answer 1

我想如果你以这种方式添加它，它会做你想做的：

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