你能用anime.js为文本内容制作动画吗？答案

【问题标题】：Can you animate text content with anime.js?你能用anime.js为文本内容制作动画吗？
【发布时间】：2020-11-08 00:24:00
【问题描述】：

var elements = document.querySelectorAll('.content');

anime({
  targets: elements,
  content: 100,
});

<script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script>
<span class="content">50</span>

原谅我，这个 sn-p 一点也不工作：我不知道在 sn-p 代码中导入后如何使用anime.js。这适用于我的项目。

这是尝试使用此代码执行的操作：我希望跨度中的数字 50 变为 100。官方文档中有一个类似的示例：https://animejs.com/documentation/#domAttr

但这适用于 Dom 属性。我想处理 dom 内容。这可能吗？

【问题讨论】：

标签： javascript html css anime.js

【解决方案1】：

您应该为此使用动漫的 innerHTML 属性：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>animejs</title> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"> 
        </script> 
    </head> 
    <body> 
        <span class="content">50</span>
        <script> 
            anime({ 
                targets: document.querySelector(".content"),
                innerHTML: 100,
                easing: 'linear',
                round: 1,
                delay: 1000 // demo purpose
            }); 
        </script> 
    </body> 
</html>

【讨论】：

@DanielKaplan animejs.com/documentation/#round 这个例子使用它

【解决方案2】：

我不知道这是否是最好的方法，但我认为可以这样做：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>animejs</title> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"> 
        </script> 
    </head> 
    <body> 
        <div></div> 
        <script> 
            var div = document.querySelector("div"); 
  
            var object = { 
                prop1: 10, 
                prop2: "0%", 
            }; 
  
            let animation = anime({ 
                targets: object, 
                prop1: 70, 
                prop2: "96%", 
                easing: "linear", 
                round: 1, 
                update: function () { 
                    div.innerHTML = JSON.stringify(object); 
                }, 
            }); 
        </script> 
    </body> 
</html>

关键部分是更新功能。它向您展示了如何在 HTML 中插入所需的任何值。

【讨论】：