Tailwind CSS 過渡屬性

過渡屬性

用于控制 CSS 過渡屬性的功能類。

使用

使用 ?transition-{properties}? 功能來指定哪些屬性在變化時(shí)應(yīng)該過渡。

<button class="transition duration-500 ease-in-out bg-blue-600 hover:bg-red-600 transform hover:-translate-y-1 hover:scale-110 ...">
  Hover me
</button>

Prefers-reduced-motion

您可以使用 ?motion-safe? 和 ?motion-reduce? 變體有條件地應(yīng)用動畫和過渡。

<button class="transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:transform-none ...">
  Hover me
</button>

這些變體默認(rèn)情況下是不啟用的，但是您可以在您的 ?tailwind.config.js? 文件的 ?variants ?部分啟用它們。

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    transitionProperty: ['responsive', 'motion-safe', 'motion-reduce']
  }
}

響應(yīng)式

要改變元素在特定斷點(diǎn)處的過渡屬性，請?jiān)谌魏维F(xiàn)有的過渡屬性功能中添加 ?{screen}:? 前綴。例如，使用 ?md:transition-colors? 來應(yīng)用 ?transition-colors? 功能，只適用于中等以上的屏幕尺寸。

關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息，請查看響應(yīng)式設(shè)計(jì)文檔。

自定義

屬性值

默認(rèn)情況下，Tailwind 為七種常見的屬性組合提供轉(zhuǎn)換屬性實(shí)用程序。您可以通過自定義 Tailwind 主題配置的 ?transitionProperty ?部分來更改、添加或刪除這些。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transitionProperty: {
         'height': 'height',
         'spacing': 'margin, padding',
        }
      }
    }
  }

在主題定制文檔中了解更多關(guān)于定制默認(rèn)主題的信息。

變體

默認(rèn)情況下， 針對 transition-property 功能類，只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?transitionProperty ?屬性來控制為 transition-property 功能生成哪些變體。

例如，這個(gè)配置也將生成 hover and focus 變體:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       transitionProperty: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的項(xiàng)目中使用 transition-property 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?transitionProperty ?屬性設(shè)置為 ?false ?來完全禁用它們：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     transitionProperty: false,
    }
  }