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。

ServiceInstall

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

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

1 个答案: