Tailwincss：组合两个过渡属性 [英] TailwindCSS: Combining 2 transitions properties

问题描述

我想要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

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

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

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

<div class="bg-[url('/what_a_rush.png')]">
  <!-- compiled to -- background-image: url('/what_a_rush.png'); -->
</div>

在极少数情况下，您确实需要使用下划线，但因为空格也是有效的，所以它是不明确的，用反斜杠转义下划线，TailWind不会将其转换为空格：

<div class="before:content-['hello\_world']">
  <!-- compiled to -- content: var('hello_world'); -->
</div>

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