单击激活 class="animateanimated animatebounce"

Question

我正在学习 html 和 css，我想使用这个库：https://animate.style/

我有这个代码

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

https://codepen.io/wmfznuiy-the-looper/pen/jOaMXXg

NUESTROS 服务

我希望效果在点击时起作用。我使用了这段代码，但没有用

$("#hola").click(function() {
  $('.animate__animated .animate__bounce-active').toggleClass('.animate__animated .animate__bounce-active');
});

我已经阅读了很多 post 并遵循了他们所说的，但它不起作用。我是新手，请帮忙。谢谢

Answer 1

# 1：缺少 jQuery。

如果您在 CodePen 中打开控制台，您可能会看到这种错误：

ReferenceError: $ is not defined

这意味着您正在使用 jQuery 的脚本而没有导入它们。您可以在 CodePen 的设置中或从 jQuery's CDN.

手动导入它

# 2：修复一些代码。

取而代之的是找到具有 class .animate__animated .animate__bounce-active 切换的元素，将 class 添加到它们。

$('#hola').click(function () {
  $('.animate__animated .animate__bounce-active').toggleClass(
    '.animate__animated .animate__bounce-active'
  );
});

对此进行更改，每次单击时将 class 添加到 #hola 并在一秒钟后删除那些 class：

$('#hola').click(function () {
  $(this).addClass('animate__animated animate__bounce');
  setTimeout(() => {
    $(this).removeClass('animate__animated animate__bounce');
  }, 1000);
});

# 3：意见

这是您定位的元素。经过几次尝试并找到最佳解决方案后，我认为 animate.style 不支持锚标记的动画。但它适用于 <h1> 和其他人。 （如有错误或遗漏请指正）

<a id="hola" class="nav-link" href="#nuestros_servicios">NUESTROS SERVICIOS</a>

结果（在代码段中）

P/s：此结果使用 <h1> 而不是 <a> 标签。

$('#hola').click(function () {
  $(this).addClass('animate__animated animate__bounce');
  setTimeout(() => {
    $(this).removeClass('animate__animated animate__bounce');
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<h1 id="hola" class="nav-link">NUESTROS SERVICIOS</h1>

Answer 2

哇，太感谢了我很高兴，我认为没有人愿意帮助我，因为这是我的第一个 post 我已经试过一百万次了，所有其他密码都不起作用的原因是你说的。我正在使用锚标签。 Animate.style 有文档，他们说做我想做的事情的最好方法是使用这个

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

但他们从未提到这不适用于锚标记，这就是它不起作用的原因。太感谢了。我尝试了您的解决方案和他们的解决方案，它们都有效，但是是的，我不得不为 H1 更改它。我希望我可以将它与锚标记一起使用，但我想这就是它的方式。谢谢

单击激活 class="animateanimated animatebounce"

Activate class="animateanimated animatebounce" on click

html

javascript

css

onclick

css-animations

# 1：缺少 jQuery。

# 2：修复一些代码。

# 3：意见

结果（在代码段中）

单击激活 class="animate__animated animate__bounce"

Activate class="animate__animated animate__bounce" on click

html

javascript

css

onclick

css-animations

# 1：缺少 jQuery。

# 2：修复一些代码。

# 3：意见

结果（在代码段中）

单击激活 class="animateanimated animatebounce"

Activate class="animateanimated animatebounce" on click