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

问题描述

我知道仅使用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,delay: 1000
                    });

我需要做什么才能使它正常工作？

解决方法

您需要向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,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>

anime.js html javascript