在一定时间内淡出/过渡顺风等级到其他等级？

Question

有没有办法在 2 秒内将bg-red-300其设置并淡出/转换为bg-transparent不同的 bg 类，或者我是否需要 javascript？我想要一个元素突出显示，然后在 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>

演示

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

Answer 2

您可以利用顺风过渡属性

过渡不透明度

<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

演示