创建一个带有循环的模拟终端来延迟 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>

我将调整时间，但现在我只想让动画一个接一个地开始。我很难找到如何使用班级儿童应用动画的清晰示例。任何指导将不胜感激！

代码笔： https: //codepen.io/coloradical/pen/gOaMzjm

Answer 1

我的做法如下：首先，line从<p>标签中删除该类并将其设置为display:none. 然后，让 Javascript 程序将该类添加line到第一个类<p>，并animationend为该元素上的事件添加一个事件侦听器。（还要更改 的 CSS，.line以便它具有针对 的附加规则display: block。）当该事件触发时，它会line从当前的类中删除类<p>，并将该类line和相同的事件侦听器添加到下一个<p>。换句话说，每次animationend触发时，它都会删除其触发元素的line类，并将该类line以及事件侦听器添加到下一个<p>.https://codepen.io/km0ser/pen/xxwOjNbfunction 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>