CSS3 过渡：按顺序打字 html <p>

Question

我遇到了一个问题，在多个段落上设置不透明度转换动画以模拟顺序打字。在我的页面中，我有三个包含文本的"段落"元素。我想按顺序可视化它们：第一个，逐个字符，然后第二个，逐个字母，然后第三个，逐个符号。我注意到代码只适用于n-1段。。。最后一个总是立即显示。所以我的诀窍是在最后一段加入一个"假人"空白。。。但我不喜欢。有没有一种更优雅的方法来解决这个问题？我的代码如下：

1. CSS：

   span.typewrite {
          opacity: 0;
           -webkit-transition-property: opacity;
           -webkit-transition-duration: 0s;
           -webkit-transition-timing-function: linear;
       }
   

2. javascript:

           window.onload = function() {
           var setTypeWrite = function(arr) {
                   var     p, txt, span, t = 0;
               for (var a = 0; a < arr.length; a++) {
                   p = document.querySelector(arr[a]);
                   txt = p.innerText;
                   p.innerText = "";
                   for (var i = 0; i < txt.length; i ++)
                   {
                       span = document.createElement("span");
                       span.className = "typewrite";
                       span.appendChild(document.createTextNode(txt.substr(i, 1)));
                       span.style["-webkit-transition-delay"] = parseFloat(t * 0.15).toString() + "s";
                       p.appendChild(span);
                       t++;
                   }
               }
           };          
           var startTypeWrite = function(arr) {
               var spans;
               for (var i = 0; i < arr.length; i++)
               {
                   spans = document.querySelectorAll(arr[i]);
                   for (var s = 0; s < spans.length; s++) {
                       spans[s].style.opacity = "1";
                   }
               }
           };              
           setTypeWrite(["#text1", "#text2", "#text3", "#dummy"]);                         
           startTypeWrite(["#text1 span.typewrite", "#text2 span.typewrite", "#text3 span.typewrite", "#dummy"]);
       };
   

3. HTML正文：

   <p id="text1">text one...</p>
   <p id="text2">text two...</p>
   <p id="text3">text three</p>
   <p id="dummy"></p>
   

Answer 1

有趣的注意事项。

我更新了"setTypeWrite"功能中的一部分，使其与Firefox兼容：

txt = p.textContent;
p.textContent = "";

然后我添加了一个按钮来提高转换：

<button id="button">start</button>
document.querySelector("#button").onclick = function() { startTypeWrite(["span.typewrite"]); };

现在，在Chrome中，点击按钮可以按预期启动动画（没有"伪"段落）。这只是让我再次想到一个时间错误。

顺便说一句，"打字"的逐字符转换在Firefox中似乎不起作用：document.querySelectorAll（".typetype"）返回"undefined"。querySelectorAll在Firefox中工作吗？

Answer 2

回到第一篇文章，这里有一个重新访问的版本，它在没有伪段落的情况下工作。它在Chrome中正常工作："magik"在"setTypeWrite"函数中的"t++；"之后添加了"span.innerText；"。我不知道为什么，但似乎代码需要阅读它。

顺便说一句，还有一个问题：为什么它在Firefox中不起作用？

1. CSS：

   .打字{不透明度：0；

           transition-property: opacity;
           transition-duration: 0s;
           transition-timing-function: linear;
           -webkit-transition-property: opacity;
           -webkit-transition-duration: 0s;
           -webkit-transition-timing-function: linear;
           -moz-transition-property: opacity;
           -moz-transition-duration: 0s;
           -moz-transition-timing-function: linear;
           -o-transition-property: opacity;
           -o-transition-duration: 0s;
           -o-transition-timing-function: linear;
       }
   

2. javascript

   window.onload=函数（）｛

           var setTypeWrite = function(arr) {
                   var p, txt, span, t = 10;
               for (var a = 0; a < arr.length; a++) {
                   p = document.querySelector(arr[a]);
                   txt = p.textContent;
                   p.textContent = "";
                   for (var i = 0; i < txt.length; i ++)
                   {
                       span = document.createElement("span");
                       span.className = "typewrite";
                       span.appendChild(document.createTextNode(txt.substr(i, 1)));
                       span.style["transition-delay"] = parseFloat(t * 0.2) + "s";
                       span.style["-webkit-transition-delay"] = parseFloat(t * 0.2) + "s";
                       span.style["-moz-transition-delay"] = parseFloat(t * 0.2) + "s";
                       span.style["-o-transition-delay"] = parseFloat(t * 0.2) + "s";
                       p.appendChild(span);
                       t++;
                       span.innerText;
                   }
               }
           };          
           var startTypeWrite = function(arr) {
               var spans;
               for (var i = 0; i < arr.length; i++)
               {
                   spans = document.querySelectorAll(arr[i]);
                   for (var s = 0; s < spans.length; s++) {
                       spans[s].style.opacity = "1";
                   }
               }
           };  
           setTypeWrite(["#text1", "#text2", "#text3"]);                         
           startTypeWrite([".typewrite"]);
       };
   

3. HTML正文：

   文本一。。。 文本二。。。 文本三。。。