Demo02-js实现文字跳出动画

本例较为简单，主要利用js来实现动画延迟的运用，利用animation-fill-mode实现障眼法

不过需要注意下面这个问题

• 段落中每个符号都在一个单独的span标签中，包括空格，因此white-space不能使用默认值，因为normal会自动删除标签内行尾空格，而空格单独属于一个span标签

代码如下：

html结构

<p class="landIn">Ano hi watashitachi mada shiranai no Fushigi no monogatari desu.
I am your friend. Hello world! But ere she from the church-door stepped She smiled 
and told us why: 'It was a wicked woman's curse,' Quoth she, 'and what care I?' She
 smiled, and smiled, and passed it off Ere from the door she stept—</p>

CSS(scss)

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
  //以多张图片为背景
  background-image: linear-gradient(rgba(16, 16, 16, 0.8),
      rgba(16, 16, 16, 0.8)),
    url(https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg);
    //图片大小：覆盖所有区域（自动拉伸）
  background-size: cover;
}

p {
  margin: 0em 2em;
  font-size: 2em;
  font-weight: 600;
}
.landIn {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.8;
  color: white;
  //不删除标签末尾空格
  white-space: pre;
  span {
    //animaiton-fill-mode:both
    animation: landIn 0.8s ease-out both;
  }
}
@keyframes landIn {
  from {
    opacity: 0;
    transform: translateY(-20%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

JavaScript

  let landInTexts = document.querySelectorAll(".landIn");
  landInTexts.forEach(landInText => {
    let letters = landInText.textContent.split("");
    landInText.textContent = "";
    letters.forEach((letter, i) => {
      let span = document.createElement("span");
      span.textContent = letter;
      span.style.animationDelay = `${i * 0.05}s`;
      landInText.append(span);
    });
  });