时间戳

首页 > 解决方案 > 如何用动漫js创建文本显示动画？

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

问题描述

我知道用 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
                    });

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

标签： javascripthtmlcssanime.js

解决方案

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

 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>

推荐阅读