如何用动画JS创建文本显示动画？

Question

我知道单独使用CSS创建文本显示动画很简单，但是我需要使用animejs来创建这个动画。

我需要创建这样的东西:文本揭示动画演示在CSS。

这是我到目前为止的HTML

<div class="text-box">
            <span class="my-text">2020 is a horror movie</span>
              
 </div>

JS

                    anime.timeline({loop: true})
                    .add({
                        
                        targets: ".text-box .my-text",
                        translateY: [-100,0],
                        easing: "easeOutExpo",
                        duration: 1400,
                        delay: (el, i) => 30 * i
                    }).add({
                        targets: ".content-box",
                        opacity: 1,
                        duration: 1000,
                        easing: "easeOutExpo",
                        delay: 1000
                    });

我需要做什么才能让它工作？

Answer 1

您需要向文本框添加一些额外的css，并更改元素的显示属性（默认情况下为内联），以便识别翻译更改:

null

 anime.timeline({loop: true})
    .add({
      targets: '.text-box .my-text',
      translateY: [100, 0],
      easing: 'easeOutExpo',
      duration: 1400,
    })
    .add({
      targets: '.text-box',
      opacity: 0,
      duration: 1000,
      easing: 'easeOutExpo',
      delay: 1000
    });

.text-box {
  text-align: center;
  overflow: hidden;
  font-size: 4em;
}

.my-text {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<div class="text-box">
  <span class="my-text">2020 is a horror movie</span>
</div>