【问题标题】: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>

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

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

【问题讨论】:

    标签: javascript html css anime.js


    【解决方案1】:

    您需要向text-box 添加一些额外的css 并更改&lt;span/&gt; 元素的显示属性(默认为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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-08-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-16
      相关资源
      最近更新 更多