Javascript 测试Animate.css时，element.classList.addClass不是函数_Javascript_Css Animations_Internet Explorer 11_Animate.css

Javascript 测试Animate.css时，element.classList.addClass不是函数

javascript

Javascript 测试Animate.css时，element.classList.addClass不是函数,javascript,css-animations,internet-explorer-11,animate.css,Javascript,Css Animations,Internet Explorer 11,Animate.css,我已经从github下载了Animate.min.css。我可以在页面加载后看到初始动画 <h1 class="animated bounce delay-2s">Example</h1> 抛出异常 test_animate.html:14 Uncaught TypeError: element.classList.addClass is not a function at myclick (test_animate.html:14) at HTMLB

我已经从github下载了

Animate.min.css

。我可以在页面加载后看到初始动画

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

抛出异常

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>

依照我把它改成了

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

现在异常消失了，但我仍然无法仅在IE11上看到预期的动画。在铬合金中一切正常。

经过一些实验，我发现下面的代码在Chrome和IE11上都能正常工作

<html>
<head>
  <link rel="stylesheet" href="animate.min.css">
  <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
  <h1 class="animated bounce delay-2s">Example</h1>
  <h2 name="par_test" id ="par_id" class="my-modern">Test this</h2>
  <button onclick = "myclick()">Animate</button>
</body>
<script>
function myclick() {
  $('.my-modern').addClass('bounceOutLeft animated');
}
</script>
</html>

Element.classList.addClass

不是一个函数，正如您已经发现的那样

Element.classList.add

is，虽然IE11支持它，但它不支持在您执行操作时向它提供多个参数

MDN上有一个可用的，您可以使用，也可以使用jQuery。

element.classList.addClass

正确，它是

element.classList.add

-同样。。。这可能与你的CSS有关——你还没有展示发布这个问题的解决方案的方法。我建议你试着在48小时后将自己的答案标记为这个问题的可接受答案，如果可以标记的话。它可以在将来帮助其他社区成员解决类似的问题。谢谢你的理解。

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

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

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

<html>
<head>
  <link rel="stylesheet" href="animate.min.css">
  <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
  <h1 class="animated bounce delay-2s">Example</h1>
  <h2 name="par_test" id ="par_id" class="my-modern">Test this</h2>
  <button onclick = "myclick()">Animate</button>
</body>
<script>
function myclick() {
  $('.my-modern').addClass('bounceOutLeft animated');
}
</script>
</html>

element.classList.add('bounceInDown');
element.classList.add('animated');