在添加课程的其他部分之后，自动键入文本完成时显示文本

Question

我想在.first上键入文本活动类之后再删除，并在删除文本和自动键入后工作正常。

添加div类的其他active问题我想在键入文本并暂停一秒钟然后激活其他div时显示div。

对我来说这是非常关键的情况。

请帮助我提前尝试超级感谢。

Node.prototype.nextNode = function() {
  var cur = this;
  while (cur = cur.nextSibling) {
    if (cur.nodeType === 1 && !cur.classList.contains('fakeContent')) {
      return cur;
    }
  }
  return null;
};

Node.prototype.firstNode = function() {
  var cur = this.firstChild;
  if (cur.nodeType === 0) {
    return cur;
  } else {
    return cur.nextNode();
  }
};

Element.prototype.typeAndDelete = function(options) {
  options = options || {};

  var contentList = this,
    curContent = contentList.getElementsByClassName('active')[0] || contentList.firstNode();

  // default options
  var selectTimePerWord = options.selectTimePerWord || 100,

    typeTimePerWord = options.typeTimePerWord || 150,
    delayAfterSelect = options.delayAfterSelect || 500,
    delayAfterDelete = options.delayAfterDelete || 600,
    delayBetweenWords = options.delayBetweenWords || 1000;

  // create fake content
  var fakeContent = contentList.getElementsByClassName('fakeContent')[0];
  if (!fakeContent) {
    fakeContent = document.createElement('span');
    fakeContent.classList.add('fakeContent');
    fakeContent.classList.add('selecting');
    contentList.appendChild(fakeContent);
  }

  // selecting handler
  var selecting = function() {
    // initial fake content with the same text
    fakeContent.innerHTML = curContent.innerHTML;

    // start selecting
    var selectingAnimation = setInterval(function() {
      fakeContent.innerHTML = fakeContent.innerHTML.substring(0, fakeContent.innerHTML.length - 1);
      if (fakeContent.innerHTML.length <= 0) {
        clearInterval(selectingAnimation);

        deleting();
      }
    }, selectTimePerWord);
  };

  // deleting handler
  var deleting = function() {
    // delay, delete, and switch to the next content
    setTimeout(function() {
      fakeContent.classList.remove('selecting');
      fakeContent.classList.add('typing');
      curContent.classList.remove('active');

      curContent = curContent.nextNode() ? curContent.nextNode() : contentList.firstNode();
      curContent.classList.add('typing');
      curContent.classList.add('active');
    }, delayAfterSelect);

    // delay and start typing
    setTimeout(function() {
      typing();
    }, delayAfterDelete);
  };

  // typing handler
  var typing = function() {
    // delete fake content
    fakeContent.innerHTML = "";

    // start typing
    var typingAnimation = setInterval(function() {
      fakeContent.innerHTML = curContent.innerHTML.substring(0, fakeContent.innerHTML.length + 1);

      // stop typing
      if (fakeContent.innerHTML.length >= curContent.innerHTML.length) {
        fakeContent.classList.remove('typing');
        clearInterval(typingAnimation);

        // delay between words
        setTimeout(function() {
          curContent.classList.remove('typing');
          fakeContent.classList.add('selecting');
          selecting();
        }, delayBetweenWords);
      }
    }, typeTimePerWord);
  };

  return selecting();
};

document.getElementById('content').typeAndDelete({
  delayAfterDelete: 500
});

html,
body {
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: left;
  position: relative;
  line-height: 1em;
  height: 1em;
  top: 50%;
  left: 30%;
  display: inline-block;
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  font-family: 'Times New Roman';
}

@-moz-keyframes blinkCursor {
  0% {
    border-left: 0.1em solid transparent;
  }
  50% {
    border-left: 0.1em solid transparent;
  }
  51% {
    border-left: 0.1em solid #999;
  }
  100% {
    border-left: 0.1em solid #999;
  }
}

@-webkit-keyframes blinkCursor {
  0% {
    border-left: 0.1em solid transparent;
  }
  50% {
    border-left: 0.1em solid transparent;
  }
  51% {
    border-left: 0.1em solid #999;
  }
  100% {
    border-left: 0.1em solid #999;
  }
}

@keyframes blinkCursor {
  0% {
    border-left: 0.1em solid transparent;
  }
  50% {
    border-left: 0.1em solid transparent;
  }
  51% {
    border-left: 0.1em solid #999;
  }
  100% {
    border-left: 0.1em solid #999;
  }
}

#content {
  position: absolute;
  list-style: none;
  display: inline-block;
  overflow: hidden;
  left: 100%;
  top: 0;
  white-space: nowrap;
}

#content li {
  display: none;
  position: relative;
  line-height: 100%;
}

#content li.active {
  display: inline-block;
}

#content li.active.typing {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

#content .fakeContent {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  height: 1em;
}

#content .fakeContent:after {
  content: '';
  position: absolute;
  width: 100vw;
  height: 1em;
  left: calc(100% - 0.1em);
  top: 0;
  z-index: -2;
  border-left: 0.1em solid #999;
  background-color: #E0E0E0;
  -moz-background-clip: padding;
  -o-background-clip: padding-box;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  -moz-animation: blinkCursor 1.5s linear infinite;
  -webkit-animation: blinkCursor 1.5s linear infinite;
  animation: blinkCursor 1.5s linear infinite;
}

#content .fakeContent.typing:after {
  background-color: transparent;
  -moz-animation: none;
  -webkit-animation: none;
  animation: none;
  left: 100%;
}

#content .fakeContent.selecting:after {
  -moz-animation: none;
  -webkit-animation: none;
  animation: none;
}

<h1>I am a
  <span id="content">
        <li >Developer</li>
        <li>Programmer </li> 
        <li>Problem Solver</li>
        <li>Sprouter!</li>
        <li>Sprouter!</li>
        <li>Sprouter!</li>
        <li>Sprouter!</li>
    </span>
  <div id="main">
    <div class="first">
      There
    </div>
    <div class="first">
      There
    </div>
  </div>
</h1>