CSS3 -Übergang: Typewriting html Sequenziell

Question

Ich habe ein Problem, das einen Opazitätsübergang in mehreren Absätzen animiert, um sequentielle Schreibmaschinen zu simulieren. In meiner Seite habe ich drei "Absätze" -Elemente, die Text enthalten. Ich möchte sie nacheinander visualisieren: die erste, char von char, dann der zweite, char von char, dann der dritte, char von char. Ich habe festgestellt, dass der Code nur für die N-1-Absätze funktioniert ... der letzte wird immer sofort angezeigt. Mein Trick war also, eine "Dummy" -Poid als den letzten Absatz aufzunehmen ... aber ich mag es nicht. Gibt es eine Möglichkeit, das Problem eleganter zu lösen? Mein Code ist wie folgt:

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 -Körper:

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

Answer 1

Hier ist eine überarbeitete Version, die ohne den Dummy -Absatz funktioniert. Es funktioniert wie erwartet in Chrom: Der "Magik" fügte "Span.InnerText" hinzu; nach "t ++;" in der "setTypewrite" -Funktion. Ich weiß nicht warum, aber es scheint, dass der Code ihn lesen muss.

Übrigens eine andere Frage: Warum funktioniert es nicht in Firefox?

1. CSS:

   .typewrite {opazität: 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 = function () {

           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 -Körper:

   Text eins ...
   Text zwei ...
   Text drei ...

Answer 2

Interessante Überlegungen.

Ich habe einen Teil in "setTypewrite" -Funktion aktualisiert, um Firefox -kompatibel zu sein:

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

Dann habe ich eine Taste hinzugefügt, um den Übergang zu erhöhen:

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

In Chrome startet das Klicken auf die Schaltfläche die Animation wie erwartet (ohne "Dummy" -Perenz). Es hat mich nur noch einmal zu einem Zeitfehler nachdenken.

Übrigens scheint der "maschinengeschriebene" von Charübergang in Firefox nicht zu funktionieren: document.querySelectorAll (". Schreibweise") kehrt "undefiniert" zurück. Funktioniert QuerySelectorall in Firefox?