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

Question

请帮助我使用 animate.css 和 javascript(jQuery) 在鼠标悬停时为该元素设置动画这是我尝试过的，但不适用于某些课程，例如。 animate__jello超文本标记语言 <span onmouseover="add_efect(this)" > Eat </span>JSfunction 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>