在 Tailwind CSS 中组合两个过渡属性

Question

我想要transition-transform和transition-shadow，而不是两者都不是transition-all，也不是只有一个。让这两个不起作用，我找不到它的文档，我尝试像这样玩：transition-[transform, shadow]显然没有用。

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

我的应用程序有白色和黑色主题，这就是我不想只是放置的方式，transition-all因为它在切换主题时会闪烁。

Answer 1

仅适用于 TailwindCSS v3

\n

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

\n

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

\n

transition-[transform,shadow]\n// or\ntransition-[transform,_shadow]\n

\n

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

\n

[transition:transform_1s,shadow_2s]\n

\n\n

基于添加自定义样式-TailwindCSS v3

\n

\n

当任意值需要包含空格时，使用下划线（_ )，Tailwind 会在构建时自动将其转换为空格：

\n

transition-[transform,shadow]\n// or\ntransition-[transform,_shadow]\n

\n

在下划线常见但空格无效的情况下，Tailwind 将保留下划线而不是将其转换为空格，例如在 URL 中：

\n

[transition:transform_1s,shadow_2s]\n

\n

在极少数情况下，您实际上需要使用下划线，但它\xe2\x80\x99 不明确，因为空格也是有效的，请使用反斜杠转义下划线，Tailwind 不会\xe2\x80\x99 将其转换为空格：

\n

<div class="grid grid-cols-[1fr_500px_2fr]">\n  <!-- compiled to -- grid-template-columns: 1fr 500px 2fr; -->\n</div>\n

\n

\n

Answer 2

我需要transition-[transform,box-shadow]不这样做shadow

Answer 3

这有点偏离问题，但是因为我在寻找解决方案时找到了这个答案，所以我会尝试一下。

要将 2 个过渡属性与不同的持续时间或计时函数结合起来，您需要将 Tailwindcss v3 与以下内容一起使用：

before:[transition:_color_0.1s,transform_0.2s_ease-out]

它回答了/sf/users/1186166131/问题，我本来会对其进行评论，但现在需要 50 名代表才能发表评论。

希望它能帮助一些人！