我已经从github Animate.min.css下载了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>
看到此行后，我通过调试addClass复制了Animate homepage
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。
经过一些实验，我发现以下代码可以正常用于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(e) {
$('.my-modern').addClass('bounceOutLeft animated');
}
</script>
</html>
似乎使用jQuery API addClass（而不是原始的JavaScript classList.add）解决了我的问题。
实际上，它是通过对主页进行反向工程而不是通过遵循存储库的自述文件而得出的。