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

【问题标题】：How to create text reveal animation with anime js?如何用动漫js创建文本显示动画？
【发布时间】：2020-08-13 14:47:28
【问题描述】：

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

我需要创建这样的东西：text reveal animation demo in css。

这是我目前所拥有的 HTML

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

                    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
                    });

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

【问题讨论】：

标签： javascript html css anime.js

【解决方案1】：

您需要向text-box 添加一些额外的css 并更改<span/> 元素的显示属性（默认为inline），以便它识别translateY 的更改：

 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>

【讨论】：