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

我会这样做：首先，从您的 <p> 标签中删除 line 类并将它们设置为 display:none。然后，让 Javascript 程序将 line 类添加到第一个 <p> 并为该元素上的 animationend 事件添加一个事件侦听器。 （同时更改.line 的CSS，使其具有display: block 的附加规则。）当该事件触发时，它会从当前<p> 中删除line 类并添加line 类和相同的事件侦听器到下一个<p>。 （见How do you detect when CSS animations start and end with 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>