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

2024-02-13

有没有办法设置bg-red-300并将其淡出/过渡到bg-transparent或超过 2 秒的不同 bg 类,或者我是否需要 javascript?我想要一个元素突出显示,然后在 2 秒后恢复正常。谢谢你!


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

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 https://play.tailwindcss.com/wfzSFIYmBF

附:然而你可能需要一些 Javascript 来触发animate-fade无论块是否在视口中,类列表切换或动画等都会继续进行。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在一定时间内淡出/过渡顺风等级到其他等级? 的相关文章