Переход CSS3: машиностроение HTML Последовательно

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 Body:

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

Answer 1

Вернувшись в первый пост, вот пересмотренная версия, которая работает без фиктивного абзаца. Он работает в Chrome, как и ожидалось: «Magik» добавлял «span.innertext»; После "t ++;" в функции «SettyPewrite». Я не знаю почему, но, похоже, код должен его прочитать.

Кстати, другой вопрос: почему он не работает в Firefox?

1. CSS:

   .typewrite {непрозрачность: 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 Body:

   текст один ...
   текст два ...
   Текст три ...

Answer 2

Интересные соображения.

Я обновил часть внутри функции "settypewrite", чтобы быть совместимой с Firefox:

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

Затем я добавил кнопку, чтобы поднять переход:

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

Теперь, в Chrome, нажатие на кнопку запускает анимацию, как и ожидалось (без «манекена» параграфа). Это просто позволило мне снова подумать о ошибке времени.

Кстати, «машиностроение» от Char By Char Transition, кажется, не работает в Firefox: Document.Queryselectorall («. Typewrite») возвращает «неопределенные». Работает ли Queryselectorall в Firefox?