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

标签： javascriptjqueryhtmlcss

Answer 1

这是我的做法：首先，line从标签中删除类<p>并将它们设置为display:none. 然后，让一个 Javascript 程序将该line类添加到第一个类，并为该元素上<p>的事件添加一个事件侦听器。animationend（同时更改 CSS.line以便它有一个附加规则display: block。）当该事件触发时，它会line从 current中删除 class<p>并将lineclass 和相同的事件侦听器添加到 next <p>。（请参阅如何检测 CSS 动画何时以 JavaScript 开始和结束？。）

换句话说，每次animationend触发时，它都会删除其触发元素的line类，并将line该类以及事件侦听器添加到 next <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>