animate.css 不适用于 javascript 中的一些类

Question

请帮助我使用 animate.css 和 javascript(jQuery)

为鼠标悬停的元素设置动画

这是我尝试过的方法，但不适用于某些类例如。 animate__jello

HTML

 <span onmouseover="add_efect(this)" > Eat </span>

JS

function add_efect(element){
  element.classList.add('animate__animated', 'animate__jello');
  
  element.addEventListener('animationend', () => {
  element.classList.remove('animate__animated', 'animate__jello');
  });
}

Answer 1

如果您想将 <span> 元素与 animate.css 一起使用，您需要向其添加 display:inline-block 或者您可以使用 <h6> 更改它，如下所示。

<span> 元素无法使用 animate.CSS 设置动画。要为它们设置动画，您需要给它们一个显示属性.

function add_efect(element){
  element.classList.add('animate__animated', 'animate__jello');
  
  element.addEventListener('animationend', () => {
  element.classList.remove('animate__animated', 'animate__jello');
  });
}

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

<h6 onmouseover="add_efect(this)">Eat</h6>


<span style='display:inline-block;' onmouseover="add_efect(this)"> Drink </span>

animate.css 不适用于 javascript 中的一些 类

animate.css is not working with some classes in javascript

javascript

animation

animate.css

animate.css 不适用于 javascript 中的一些类