如何在 Tailwind CSS 中进行宽度转换？答案

【问题标题】：How to do width transition in Tailwind CSS?如何在 Tailwind CSS 中进行宽度转换？
【发布时间】：2020-02-01 06:27:58
【问题描述】：

当我尝试使用 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>

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

【问题讨论】：

标签： vuejs2 css-transitions tailwind-css

【解决方案1】：

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

第一个是关于通过tailwind.config.js 扩展您的 Tailwind 主题。您需要为width 添加transitionProperty。

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;

正如你所见，transition-property 中缺少 width 和 height。

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

【讨论】：

但是过渡属性中没有宽度和位置是否有任何原因？我们是否应该在这些情况下使用转换？
得益于硬件加速，Transform 应该会好很多，可惜我还没来得及尝试。

【解决方案2】：

您可以使用此插件添加新类来扩展您的顺风 css。

Github：https://github.com/benface/tailwindcss-transitions

npm install tailwindcss-transitions

编辑 ↪ tailwind.config.js

{
  theme: {
    transitionProperty: { // defaults to these values
      'none': 'none',
      'all': 'all',
      'color': 'color',
      'bg': 'background-color',
      'border': 'border-color',
      'colors': ['color', 'background-color', 'border-color'],
      'opacity': 'opacity',
      'transform': 'transform',
    },
    transitionDuration: { // defaults to these values
      'default': '250ms',
      '0': '0ms',
      '100': '100ms',
      '250': '250ms',
      '500': '500ms',
      '750': '750ms',
      '1000': '1000ms',
    },
    transitionTimingFunction: { // defaults to these values
      'default': 'ease',
      'linear': 'linear',
      'ease': 'ease',
      'ease-in': 'ease-in',
      'ease-out': 'ease-out',
      'ease-in-out': 'ease-in-out',
    },
    transitionDelay: { // defaults to these values
      'default': '0ms',
      '0': '0ms',
      '100': '100ms',
      '250': '250ms',
      '500': '500ms',
      '750': '750ms',
      '1000': '1000ms',
    },
    willChange: { // defaults to these values
      'auto': 'auto',
      'scroll': 'scroll-position',
      'contents': 'contents',
      'opacity': 'opacity',
      'transform': 'transform',
    },
  },
  variants: { // all the following default to ['responsive']
    transitionProperty: ['responsive'],
    transitionDuration: ['responsive'],
    transitionTimingFunction: ['responsive'],
    transitionDelay: ['responsive'],
    willChange: ['responsive'],
  },
  plugins: [
    require('tailwindcss-transitions')(),
  ],
}

【讨论】：