CSS animation won't play when I add a class using jQuery

Question

I am trying to add a fadeout transition animation from 100 opacity to 0 opacity for a given div by adding the animate-fadeout class to the div, but it's not working. I am using Tailwind CSS, here is my config file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      scale: {
        '65': '0.65',
      },
      // animation class
      animation: {
        fadeout: 'fadeOut 1s ease-in-out',
        fadein: 'fadeIn 1s ease-in-out',
      },
      // actual animation
      keyframes: {
        fadeOut: {
          '0%': { opacity: 100 },
          '100%': { opacity: 0 },
        },
        fadeIn: {
          '0%': { opacity: 0 },
          '100%': { opacity: 100 },
        },
      },
    },
  },
  plugins: [],
}

Here is my HTML:

      <div id="item1" class="carousel-item">
        <img src="images/temp.jpg" class="absolute block w-full">
        <div class="text-shadow-custom pl-72 pr-72 w-full h-full flex flex-col items-center justify-center absolute">
          <p class="text-center text-white text-2xl font-bold">TEST TEXT</p>
          <p class="text-center text-white text-xl">Test description</p>
          <a href="#" class="mt-8 p-2 rounded bg-red-600 text-white">LEARN MORE</a>
        </div>
      </div>

And my javascript is literally just this:

$('#item1').addClass('animate-fadeout');

But nothing happens. No animation, and the animate-fadeout class doesn't even appear in the styles tab in developer tools.

When I put the animate-fadeout class directly into the div like this <div id="item1" class="carousel-item animate-fadeout"> and refresh the page, it works perfectly. I really am lost as to why this isn't working. Help is appreciated!

Try to make a working example in JSFiddle or Stack Snippet, so we can reproduce. — Ghost
– Ghost, Commented Jul 24, 2023 at 17:13
I tried JSFiddle, and it's possible to include tailwind.min.css but unfortunately I'm not sure how to include or edit the tailwind.config.js, meaning I can't extend animations to add my own stuff. If you know of a way to do it, I happily will add that. Tailwind play also doesn't let you add JavaScript, unfortunately — justdoingmyjob
– justdoingmyjob, Commented Jul 24, 2023 at 17:47
Your code seems to work as expected in this JSFiddle. Consider providing code that reproduces the issue. — Wongjn
– Wongjn, Commented Jul 24, 2023 at 18:12
I added my full code on top of that fiddle... And it works perfectly. I really have no idea what I could be doing wrong. Thanks for the help anyways. — justdoingmyjob
– justdoingmyjob, Commented Jul 24, 2023 at 18:37

khusbu patel · Accepted Answer · 2024-10-04 12:31:43Z

0

working example - https://play.tailwindcss.com/fZJsGYGcIf

<div id="item1" class="carousel-item animate-fadeout">
    <img src="images/temp.jpg" class="absolute block w-full">
    <div class="text-shadow-custom pl-72 pr-72 w-full h-full flex flex-col items-center justify-center absolute">
      <p class="text-center text-white text-2xl font-bold">TEST TEXT</p>
      <p class="text-center text-white text-xl">Test description</p>
      <a href="#" class="mt-8 p-2 rounded bg-red-600 text-white">LEARN MORE</a>
    </div>
  </div>

answered Oct 4, 2024 at 12:31

khusbu patel

296 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Boshra Jaber Over a year ago

Please explain what you've changed to address the issue. Code-only answers are not good answers

j08691 Over a year ago

And always post your minimal reproducible example here, not on another site.

Collectives™ on Stack Overflow

CSS animation won't play when I add a class using jQuery

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related