时间戳

首页 > 解决方案 > 测试 Animate.css 时 element.classList.addClass 不是函数

javascript - 测试 Animate.css 时 element.classList.addClass 不是函数

问题描述

我已经Animate.min.css从 github repo下载了。我可以在页面加载后看到初始动画。

<h1 class="animated bounce delay-2s">Example</h1>

但是，如果我点击一个按钮：

<button onclick = "myclick()">Animate</button>

javascript函数

function myclick() {
  const element =  document.querySelector('.my-modern');
  element.classList.addClass('animated', 'bounceOutLeft');
}

抛出异常

test_animate.html:14 Uncaught TypeError: element.classList.addClass is not a function
    at myclick (test_animate.html:14)
    at HTMLButtonElement.onclick (test_animate.html:9)

我也试过添加 jquery 没有成功

<script src="jquery-3.4.1.min.js"></script>

但我不知道我应该怎么做才能解决这个问题。

我希望看到以下段落被动画化。

<p name="par_test" class="my-modern">Test this</p>

编辑（发现问题是 IE11 特定的）

看到这一行后，我addClass从调试Animate 主页中复制了

  function testAnim(x) {
    $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });
  };

根据此评论 ，我已将其更正为

element.classList.add('animated', 'bounceOutLeft');

现在异常消失了，但我仍然无法在 IE11 上看到预期的动画。在 Chrome 中一切正常。我已将此作为问题发布在 github 上。

标签： javascriptcss-animationsinternet-explorer-11animate.css

解决方案

Element.classList.addClass正如您已经发现的那样，它不是一个函数。Element.classList.add是，虽然 IE11 支持它，但它不支持向它提供多个参数，就像你正在做的那样。

MDN 上有一个可用的polyfill，您可以使用它，或者您可以使用 jQuery。

推荐阅读