Activate class="animate__animated animate__bounce" on click-CodePudding

I am learning html and css and I want to use this library: https://animate.style/

I have this code

<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 SERVICIOS

I want the effect to work when clicking. I used this code but it didn't work

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

I have read many post and followed what they say but it is not working. I am new, please help. Thank you

CodePudding user response：

# 1: Missing jQuery.

If you open the console in your CodePen, you may see this kind of error:

ReferenceError: $ is not defined

This means you're using jQuery's script without importing them. You can import it whether in CodePen's setting or manually import from jQuery's CDN.

# 2: Fix Some Code.

Instead of this, which is find the element which has class .animate__animated .animate__bounce-active toggle add the class to them.

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

Change to this, which add the class to the #hola everytime get clicked and remove those class after a second:

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

# 3: Opinion

This is the element you're targetting. After a few times trying and finding the best solution, I think animate.style doesn't support the animation for the anchor tag. But it works with <h1> and the others. (Correct me if I'm wrong or missed something)

<a id="hola"  href="#nuestros_servicios">NUESTROS SERVICIOS</a>

Result (in Code Snippet)

P/s: This result is using <h1> instead of <a> tag.

$('#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" >NUESTROS SERVICIOS</h1>

CodePudding user response：

Wow Thank you soooo much I am so happy and I didn't think nobody wanted to help me because it is my first post I had already tried a million of times and the reason all of the other codes didn't work was because of what you said. I was using the anchor tag. Animate.style has documentation and they say the best way to do what I wanted was using this

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});
  });

but they never mentioned this was not going to work with the anchor tag and that's why It was not working. Thank you so much. I tried your solutuion and their solution and they both work but yeah I had to change it for H1. I wished I could use it with the anchor tag but that's the way it is I guess. Thanks