javascript - JS，CSS)从字符串中获取字母并使每个字母顺利落下(无JQUERY

Question

您好，我的网站需要一些有趣的文字动画。

例如下落的字母。

如果我使用 Word 'Stackoverflow' ，

第一个字母(S)会掉下来，之后当第一个字母写完

第二个字母 (t) 会掉下来，在第三个字母 (a) 之后...

重复直到最后一个字母落下。

使用下面的代码/jsfiddle，它无法按预期工作。

这是我的代码:

var textDOM = document.querySelector('#home p');
function appendLetters(target,text,index){
    if(index<text.length){
        textDOM.innerHTML+='<span>'+text[index++]+'</span>';

        setTimeout(function(){
            textDOM.lastChild.classList.add('index-'+index);
            appendLetters(target,text,index)
        },1000);

    }
}

(function(){
    console.log(appendLetters);
    appendLetters('#home p', 'a simple site made by an web developer',0);
}())

CSS:

#home p span{
position:relative;
top:-60px;
/*animation:fallLetters 0.2s;*/
transition: top 0.8s linear;
}
#home p span[class^='index-']{
    top:0px;
}

因为 span 标签的转换延迟是 0.8 秒，“完全”改变它们的 css top 值应该需要 800 毫秒。

但是在我的代码中，除了最后一个字母之外的所有字母都不想顺利落下。不知道为什么。

http://jsfiddle.net/1fcgv0ta/

您只看到最后一个字母顺利掉落，但所有字母都应该顺利掉落。如何在没有 JQUERY 的情况下修复我的代码？

我的元素中没有 JQuery 空间。

Answer 1

您的问题的原因完全是因为您正在通过附加到 innerHTML 来更新 DOM。属性使用+= .实际上，我之前已经读到过这种令人气馁的情况，但直到在这里分析您的代码之前，我才真正意识到为什么! (原因是我倾向于总是使用 jQuery 来完成直接的 DOM 操作任务，所以对 vanilla DOM API 不太熟悉——当然这与答案无关!)

无论如何，说:

node.innerHTML += myHTMLString;

当然等同于:

node.innerHTML = node.innerHTML + myHTMLString;

但是手写它可以更清楚地表明您实际上并不是真正地“添加”到 innerHTML .您只是用全新的 HTML 内容替换它 - “恰好”是添加了新元素的原始内容。

为什么这在这里很重要？这很重要，因为您正在使用 CSS 过渡。您想要的“下降”效果只会在您的 <span> 之一时发生。元素获得 index-* 之一类添加到它。 [旁注，没有理由不为此使用单个类。]现在，您当然要在代码中添加此类 - 但紧接着，您调用 appendLetters同样，正如我刚才指出的那样，清除了 textDOM 的全部内容。并用新内容替换它。结果，转换实际上并没有发生，因为没有任何东西可以从 -a <span class="index-1"> 转换。 (例如)不知从何而来，它有一个 CSS top 0px 的值.是的，它有一个 transition属性也是如此，但由于该元素之前实际上并不存在，因此没有什么可以从 进行转换，因此它“只是出现”在您希望成为其最终位置的位置。

这也告诉您为什么它 为最后一个字母(e)工作。虽然appendLetters之后调用，if检查失败，因此您不会更新 DOM - 因此旧的 DOM 不会被破坏并被新的替换，并且转换功能按计划进行。

哎呀——我去的时间比我想的要长得多，但我希望你能理解(希望如此)清晰的解释。

我相信您已经意识到，修复方法是以附加新元素的方式更新 DOM，而不是像您正在做的那样先销毁然后重新创建迄今为止。因此，而不是有问题的行:

textDOM.innerHTML+='<span>'+text[index++]+'</span>';

改为这样做:

var newSpan = document.createElement('span');
newSpan.innerHTML = text[index++];
textDOM.appendChild(newSpan);

希望这能解决您的问题 - 如果确实如此并且您对解释表示赞赏，请给我投票 :)