CSS3 过渡：按顺序输入 html <p>答案

【问题标题】：CSS3 transition: typewriting html <p> sequentiallyCSS3 过渡：按顺序输入 html <p>
【发布时间】：2012-03-10 01:29:06
【问题描述】：

我在为多个段落设置不透明过渡动画以模拟顺序打字时遇到问题。在我的页面中，我有三个包含文本的“段落”元素。我想按顺序对它们进行可视化：第一个，逐个字符，然后是第二个，逐个字符，然后是第三个，逐个字符。我注意到代码仅适用于 n-1 段......最后一个总是立即显示。所以我的诀窍是在最后一段中包含一个“虚拟”空白......但我不喜欢它。有没有办法以更优雅的方式解决问题？我的代码如下：

CSS：

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

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"]);

    };

HTML 正文：

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

【问题讨论】：

Javascript 使用从零开始的索引，CSS 使用从一开始的索引。如果在将索引传递给 querySelectorAll() 之前将其添加到索引中，它应该可以工作。
你的意思是在“startTypeWrite”函数中吗？类似 querySelectorAll(arr[i+1])?
在我看来就像 chrome 中的一个错误
我想是的；我正在工作，所以我没有机会玩代码，但这就是我快速查看您发布的内容时跳出来的原因。
会不会是同步问题？如果我通过 setTimeout 调用“startTypeWrite”函数，一切似乎都按预期工作......

标签： css opacity css-transitions

【解决方案1】：

有趣的注意事项。

我将“setTypeWrite”函数中的一部分更新为与 Firefox 兼容：

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

然后我添加了一个按钮来提升过渡：

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

现在，在 Chrome 中，单击按钮会按预期启动动画（没有“虚拟”段落）。它只是让我再次想到时间错误。

顺便说一下，“typewrited”char by char 转换似乎在 Firefox 中不起作用：document.querySelectorAll(".typewrite") 返回“undefined”。 querySelectorAll 在 Firefox 中有效吗？

【讨论】：

在 Opera 中也试过......显然该代码仅在 Chrome 中有效。

【解决方案2】：

回到第一篇文章，这里是一个重新审视的版本，它可以在没有虚拟段落的情况下工作。它按预期在 Chrome 中工作：“magik”正在添加“span.innerText;”在“t++;”之后在“setTypeWrite”函数中。我不知道为什么，但似乎代码需要阅读它。

对了，还有一个问题：为什么它在 Firefox 中不起作用？

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;
    }

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"]);

    };

HTML 正文：
文字一... 文字二... 文本三...

【讨论】：