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

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

<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的）

看到此行后，我通过调试Animate homepage复制了addClass

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

根据this comment
我已将其改正为

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

现在异常消失了，但是我仍然只能在IE11上看不到预期的动画。在Chrome中一切正常。
我将其发布为issue on github。

最佳答案

正如您已经发现的，Element.classList.addClass不是函数。 Element.classList.add是，并且尽管IE11支持它，但它不支持在执行操作时为其提供多个参数。

您可以使用MDN上的polyfill，也可以使用jQuery。

关于javascript - 测试Animate.css时element.classList.addClass不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58483052/