Fade/transition 顺风 class 在一定时间内对其他事物产生影响？

Question

有没有办法在 2 秒内将 bg-red-300 和 fade/transition 设置为 bg-transparent 或不同的 bg class 或者我需要 javascript这个？我想要一个元素突出显示，然后 return 在 2 秒后恢复正常。谢谢！

Answer 1

您可以使用配置文件创建自己的动画

module.exports = {
  mode: 'jit',
  theme: {
    extend: {
      
      // that is animation class
      animation: {
        fade: 'fadeOut 5s ease-in-out',
      },

      // that is actual animation
      keyframes: theme => ({
        fadeOut: {
          '0%': { backgroundColor: theme('colors.red.300') },
          '100%': { backgroundColor: theme('colors.transparent') },
        },
      }),
    },
  },
  variants: {},
  plugins: [],
}

像使用它

<div class="w-40 h-40 animate-fade"></div>

Demo

P.S。但是，您可能需要一些 Javascript 来触发 animate-fade 类列表切换或其他内容，因为无论块是否在视口中，动画都会继续。

Answer 2

您可以利用顺风过渡属性

transition-opacity

<div class="h-8 w-8 bg-blue-600 transition-opacity ease-in duration-700 opacity-100 : hover:opacity-0"></div>

参考https://tailwindcss.com/docs/transition-property

Demo

Fade/transition 顺风 class 在一定时间内对其他事物产生影响？

Fade/transition tailwind class to something else over certain amount of time?

css

tailwind-css

tailwind-in-js