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

Question

我知道使用 CSS alone, but I need to use animejs 创建文本显示动画很简单。

我需要创建这样的东西：text reveal animation demo in 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

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

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

How to create text reveal animation with anime js?

javascript

html

css

anime.js