您可以使用 anime.js 为文本内容制作动画吗？

Question

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>

请原谅，这个代码段根本不起作用：在代码段代码中导入后，我不知道如何使用 anime.js。这在我的项目中对我有用。

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

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

Answer 1

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

<!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.

Answer 2

你应该使用动漫的 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>

您可以使用 anime.js 为文本内容制作动画吗？

Can you animate text content with anime.js?

javascript

html

css

anime.js