Question

我正在尝试遵循the official Anime.js documentation to manipulate DOM attributes，但没有任何运气。

我重新创建了文档中显示的确切示例（在输入字段中处理文本），但是当我加载页面或尝试与输入字段进行交互时，没有任何反应。

文档中提供的代码示例：

<div id="domAttr" class="demo active">
        <h3 class="demo-title">DOM Attributes</h3>
        <div class="demo-content dom-attribute-demo">
          <input class="el text-output" value="0" style="">
        </div>
        <script>
            var domAttr = function() {
            anime({
                targets: '.dom-attribute-demo input',
                value: [0, 1000],
                round: 1,
                easing: 'easeInOutExpo'
            });
        }
        </script>
</div>

我的代码：

<div class="demo-content dom-attribute-demo">
        <input class="el text-output" value="0">
    </div>
    <script>
        var domAttr = function() {
                anime({
                    targets: '.dom-attribute-demo input',
                    value: [0, 1000],
                    round: 1,
                    easing: 'easeInOutExpo'
                });
            }
    </script>

我已经能够在页面上重现其他动画示例，所以我知道我已经正确导入了Anime.js ...我似乎无法使这个示例正常工作。

预期结果与Anime.js文档中显示的完全一样，如https://animejs.com/documentation/#domAttr 1所示。运行我的代码时，我在控制台中没有收到任何错误消息。页面加载后，什么也没有发生。

非常感谢您的帮助！

Answer 1

您调用了domAttr()函数吗？调用后似乎可以正常工作。

var domAttr = function() {
  anime({
    targets: '.dom-attribute-demo input',
    value: [0, 1000],
    round: 1,
    easing: 'easeInOutExpo'
  });
}

domAttr()

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<div id="domAttr" class="demo active">
  <h3 class="demo-title">DOM Attributes</h3>
  <div class="demo-content dom-attribute-demo">
    <input class="el text-output" value="0" style="">
  </div>
</div>

如何使用Anime JS处理DOM属性

1 个答案: