有没有办法设置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(使用前将#替换为@)