Создание ложного терминала с al oop для задержки CSS анимаций

Question

Я пытаюсь создать сайт с фиктивным терминалом, который будет иметь вид набираемых линий, одна за другой. Я обнаружил анимацию CSS, которая отображает по одному символу за раз, но у меня возникают проблемы с задержкой анимаций каждой строки, чтобы они не появлялись не сразу.

Вот мой код:

//attempted javascript loop 
// var code_lines =document.getElementsByClassName("line");

// for (i=0; i<=5; i++){
//   code_lines:nth-child(i).style.animation = "typing 2.5s steps(30, end)";
// }


//attemped jquery loop 
//$('#terminal_text').children('line').each(function () {
//    for (i=0; i<=5; i++){
//  i.style.animation = "typing 2.5s steps(30, end)";
//}
//});

.terminal {
   width: 500px; 
  height: 500px;
  background-color: black; 
  color: white;
  padding: 20px;
}

.line {
   white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    animation: typing 2.5s steps(30, end);
}


/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

<div class="terminal"> 

<div id="terminal_text">
    <p class="line"> Last login:  </p>
    <p class="line">megan-byers:~ designelixir$ git clone https://github.com/coloradical/Rae_Portfolio.git </p>
    <p class="line">Cloning into 'Rae_Portfolio"...</p>
    <p class="line">remote: Loading website illustrations: 172 objects, done.</p>
    <p class="line">remote: Counting objects: 100% (172/172) done.</p>
  </div>
</div>

Я настрою время, но сейчас я просто хочу, чтобы анимации запускались одна за другой. Мне трудно найти четкие примеры того, как использовать детей класса для применения анимации. Любое руководство будет с благодарностью!

Codepen: https://codepen.io/coloradical/pen/gOaMzjm

Answer 1

Вот как я это сделаю: сначала удалите класс line из ваших тегов <p> и установите для них значение display:none. Затем программа Javascript добавляет класс line к первому <p>, а также добавляет прослушиватель событий для события animationend в этом элементе. (Также измените CSS на .line, чтобы у него было дополнительное правило для display: block.) Когда это событие срабатывает, оно удаляет класс line из текущего <p> и добавляет класс line и тот же класс. прослушиватель событий следующего <p>. (См. Как вы обнаруживаете, когда CSS анимации начинаются и заканчиваются JavaScript? .)

Другими словами, каждый раз, когда animationend срабатывает, он удаляет * запускающий элемент line и добавляет класс line и прослушиватель событий к следующему <p>.

https://codepen.io/km0ser/pen/xxwOjNb

function do_it() {
  $("p.line")
    .removeClass("line")
    .addClass("done")
    .next()
    .addClass("line")
    .on("animationend", function () {
      do_it();
    });
}

$("#terminal_text p.line").on("animationend", function () {
  do_it();
});

.terminal {
  width: 500px;
  height: 500px;
  background-color: black;
  color: white;
  padding: 20px;
}

.done {
  display: block !important;
}

#terminal_text p {
  display: none; /* hide by default */
}

.line {
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
  animation: typing 2.5s steps(30, end);
  display: block !important;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="terminal">

  <div id="terminal_text">
    <p class="line"> Last login: </p>
    <p>megan-byers:~ designelixir$ git clone https://github.com/coloradical/Rae_Portfolio.git </p>
    <p>Cloning into 'Rae_Portfolio"...</p>
    <p>remote: Loading website illustrations: 172 objects, done.</p>
    <p>remote: Counting objects: 100% (172/172) done.</p>

  </div>
</div>