CSS3 переход: набор текста html <p>последовательно - PullRequest
0 голосов
/ 19 февраля 2012

У меня проблема с анимацией перехода непрозрачности в нескольких абзацах для имитации последовательной печати. На моей странице есть три элемента "параграфы", которые содержат текст. Я хотел бы визуализировать их последовательно: сначала символ за символом, затем второй символ за символом, а затем третий символ за символом. Я заметил, что код работает только для 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>
    

Ответы [ 2 ]

0 голосов
/ 22 февраля 2012

Возвращаясь к первому посту, вот пересмотренная версия, которая работает без фиктивного абзаца. Он работает в 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 1014 *

    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:

    текст один ... текст два ... текст три ...
0 голосов
/ 21 февраля 2012

Интересные замечания.

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

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

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

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

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

Кстати, "typewrited" переход от char к символу, похоже, не работает в Firefox: document.querySelectorAll (". Typewrite") возвращает "undefined".Работает ли querySelectorAll в Firefox?

...