javascript - 键入数组中的第一项后，键入动画光标消失

Question

我正在制作打字动画 - 它显示我想要的格式和文字，除了光标动画按预期键入第一个项目，但一旦键入“item1”，光标就会消失。我希望光标在键入所有剩余项目时保留在屏幕上，并且仅在键入最后一个项目后才消失。请参阅下面的代码片段以了解它当前的作用

var TxtRotate = function (el, toRotate, period, fixedText) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = '';
    this.fixedText = fixedText;
    this.tick();
    this.isDeleting = false;
};

TxtRotate.prototype.tick = function () {

    //Stops when text completes
    if (this.loopNum >= this.toRotate.length) return;

    var i = this.loopNum;
    var fullTxt = this.toRotate[i];

    // Get the letter to substring that needs to be appended in the span
    this.txt = fullTxt.substring(0, this.txt.length + 1);


    if (this.loopNum === 0) {
        this.el.innerHTML = '<span class="wrap">' + this.fixedText + ' ' + this.txt + '</span>';
    } else {
        //adds a letter on the screen
        var spacing = '';
        var countSpacing = 0
        while (countSpacing < (this.fixedText.length * 2)) { spacing = spacing + "&nbsp;"; countSpacing++; }
        this.el.innerHTML = '<span class="wrap">' + spacing + this.txt + '</span>';
    }
    var that = this;

    //calculates the time  to wait before writing next letter
    var delta = 300 - Math.random() * 100;

    // If backspacing reduce it by  half
    if (this.isDeleting) { delta /= 2; }

    // If the word is complete
    if (!this.isDeleting && this.txt === fullTxt) {
        //add a delay of 500mx
        delta = 500;
        // add a new line (</br>
        this.el.innerHTML = `<span class="wrap">${this.el.textContent}</br></span>`;
        // add a sibling element to you element
        var next_txt = document.createElement("span");
        // add sibling element to the parent
        this.el.parentNode.appendChild(next_txt);

        // make your self new element, so that it writes into the new element next time
        this.el = next_txt;
        //  pick the next word
        this.loopNum++;
        //clear current txt
        this.txt = '';
    }

    setTimeout(function () {

        that.tick();
    }, delta);
};

window.onload = function () {
    var elements = document.getElementsByClassName('txt-rotate');
    for (var i = 0; i < elements.length; i++) {
        var toRotate = elements[i].getAttribute('data-rotate');
        var period = elements[i].getAttribute('data-period');
        var fixedText = elements[i].getAttribute('data-fixed');

        if (toRotate) {
            new TxtRotate(elements[i], JSON.parse(toRotate), period, fixedText);
        }
    }
    // INJECT CSS
    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
    document.body.appendChild(css);
};

       <h1 class="textsize">
                            <span class="txt-rotate"
                                  data-period="2000"
                                  data-fixed=" We develop"
                                  data-rotate='[ "item1", "item2", "item3", "item4", "item5" , "item6", "item7", "item8"]'></span>
                        </h1>

Answer 1

试穿这个尺寸。我对您的代码进行了以下更改。我删除了数组中的最后 4 项只是为了让动画运行得更快:

• 您的主要问题之一是您认为您正在将新的 span 元素添加为“txt-rotate”span 的同级元素，但事实并非如此，正如在检查器中所看到的那样。因此，影响“.txt-rotate > .wrap”元素的 CSS 代码将永远不会对其执行任何操作。我稍微更改了代码以使用 CSS 将伪元素添加到任何 .wrap span 元素。写完整个单词后，我会删除“换行”类。

• 如上所述，我为光标使用了一个伪元素，而不是像您那样使用边框。但如果您需要边框，您可以调整 CSS。

var TxtRotate = function (el, toRotate, period, fixedText) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = '';
    this.fixedText = fixedText;
    this.tick();
    this.isDeleting = false;
};

TxtRotate.prototype.tick = function () {
    //Stops when text completes
    var i = this.loopNum;
    if (i >= this.toRotate.length) return; 
    var fullTxt = this.toRotate[i];
    // Get the letter to substring that needs to be appended in the span
    this.txt = fullTxt.substring(0, this.txt.length + 1);
    if (this.loopNum === 0) {
        this.el.innerHTML = '<span class="wrap">' + this.fixedText + ' ' + this.txt + '</span>';
    } else {
        //adds a letter on the screen
        var spacing = '';
        var countSpacing = 0
        while (countSpacing < (this.fixedText.length * 2)) {
        	spacing = spacing + "&nbsp;";
          countSpacing++;
        }
        this.el.innerHTML = '<span class="wrap">' + spacing + this.txt + '</span>';
    }
    var that = this;
    //calculates the time to wait before writing next letter
    var delta = 300 - Math.random() * 100;
    // If backspacing reduce it by  half
    if (this.isDeleting) { delta /= 2; }
    // If the word is complete
    if (!this.isDeleting && this.txt === fullTxt) {
        //add a delay of 500mx
        delta = 500;
        // add a new line (</br>
        this.el.innerHTML = `<span>${this.el.textContent}</br></span>`;
        // add a sibling element to you element
        var next_txt = document.createElement("span");
        // add sibling element to the parent
        this.el.parentNode.appendChild(next_txt);
        // make your self new element, so that it writes into the new element next time
        this.el = next_txt;
        //  pick the next word
        this.loopNum++;
        //clear current txt
        this.txt = '';
    }
    setTimeout(function () {
        that.tick();
    }, delta);
};

window.onload = function () {
    var elements = document.getElementsByClassName('txt-rotate');
    for (var i = 0; i < elements.length; i++) {
        var toRotate = elements[i].getAttribute('data-rotate');
        var period = elements[i].getAttribute('data-period');
        var fixedText = elements[i].getAttribute('data-fixed');
        if (toRotate) {
            new TxtRotate(elements[i], JSON.parse(toRotate), period, fixedText);
        }
    }
 };

.wrap::after {
  content: "|";
}

<h1 class="textsize">
  <span class="txt-rotate" data-period="2000" data-fixed="We develop" data-rotate='["item1", "item2", "item3", "item4"]'></span>
</h1>