当我使用 jQuery 添加类时，CSS 动画不会播放

Question

我试图通过将

animate-fadeout

类添加到 div 来为给定的 div 添加从 100 不透明度到 0 不透明度的淡出过渡动画，但它不起作用。我正在使用 Tailwind CSS，这是我的配置文件：

/** @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: [],
}

这是我的 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>

我的 javascript 实际上就是这样：

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

但是什么也没发生。没有动画，并且

animate-fadeout

类甚至不会出现在开发人员工具的样式选项卡中。

当我像这样将

animate-fadeout

类直接放入div中

<div id="item1" class="carousel-item animate-fadeout">

并刷新页面时，它工作得很好。我真的很困惑为什么这不起作用。感谢帮助！

Answer 1

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>