Tailwincss：组合两个过渡属性

问题描述

我想要transition-transform和transition-shadow，不是既不是transition-all也不是只有一个。两个都不起作用，我找不到医生，我试着这样玩：transition-[transform, shadow]，显然不起作用。

基本上，我有卡片，你在上面悬停，它会放大一点，然后落下一个阴影。
className='hover:scale-105 hover:shadow-2xl transition-transform transition-shadow'
如何将过渡属性transform和shadow放在一起？

我的应用程序有黑白主题，我不想只放transition-all，因为切换主题时它会闪烁。

推荐答案

仅适用于TailwinCss v3

设置类似transition-[transform, shadow]的类被浏览器解释为两个单独的类：transition-[transform,和shadow]。

如果可能，您需要删除空格或将其替换为下划线(_)。也就是说，在您的情况下，您只需编写：

transition-[transform,shadow]
// or
transition-[transform,_shadow]

如果您还想自定义它们的持续时间，您可以编写如下内容：

transition-[transform_1s,shadow_2s]

---

基于Adding Custom Styles - TailwindCSS v3

这篇关于Tailwincss：组合两个过渡属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！