如何在 Tailwind CSS 中进行宽度过渡？

Question

当我尝试使用 Tailwind 中的默认“w-#”选项进行转换时，我的转换不适用。当我在自己的类中对宽度进行硬编码时，它工作得很好。 Tailwinds CSS 有什么奇怪的地方以及它如何处理宽度会导致这种情况吗？

这是 HTML 文本。这里的主要部分是动态类“sidebarWidth”，它在单击按钮时切换。过渡、最慢和轻松都是我在 Tailwind 中扩展的。

<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-all transition-slowest ease" :class="sidebarWidth">

这是Vue组件的计算属性中的JS代码

sidebarWidth: function() {
      if (this.$store.getters.isSidebarCollapsed) {
        return "w-14 invisible md:visible";
      } else {
        return "w-64";
      }
    }

如果我将 w-14 和 w-64 替换为以下类别，效果很好。

<style scoped>
.width1 {
  width: 100px;
}

.width2 {
  width: 400px;
}
</style>

我基本上希望我的侧边栏导航在我单击按钮时滑入。在移动设备中，侧边栏导航是隐藏的，我希望它滑出。在桌面上，它应该是一个小导航，然后滑出到全屏导航。它可以工作，但幻灯片切换不起作用。此外，移动设备和桌面设备之间的边距变化确实可以正确显示动画。

Answer 1

您需要执行几个步骤来激活您正在寻找的行为。

第一个是关于通过

tailwind.config.js

扩展 Tailwind 主题。您需要为

transitionProperty

添加

width

。

module.exports = {
    ...
    theme: {
        ...
        extend: {
            ...
            transitionProperty: {
                'width': 'width'
            },
        },
    },
}

上述更改创建了

transition-width

类。只需将其应用到您的导航标签即可。根据您的具体情况，您可以覆盖

transition-all

类。

<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-width transition-slowest ease" :class="sidebarWidth">

最后一步非常简单：确保 Tailwind 正在重新创建 CSS。之后，您应该会在项目中看到平滑的宽度过渡。

问题背景

默认情况下，Tailwind CSS 中不激活宽度和高度过渡。这是使用

transition

类时将应用的 CSS。

transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

就像您可以看到

width

和

height

在

transition-property

中缺失。

您可以在 Tailwind 文档中找到有关它的更多信息。

Answer 2

您可以像 tailwind.config.js 中一样创建自己的转换属性：

多重属性：

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        multiple: "width , height , backgroundColor , border-radius"
      }
   }
}

一处房产：

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        width: "width"
      }
   }
}

Answer 3

如果您只是想在单个位置实现此功能，并且这不是您在整个主题中都需要的东西（为此请遵循上面的 @insertcoin 答案），您可以简单地使用任意一次性值，如 中所述Tailwind 文档.

下面的代码片段对我来说效果很好：

<div class="transition-[width] duration-300">
  <!-- ... -->
</div>