Tailwind CSS - 如何在禁用按钮时禁用鼠标悬停时的transform/transition？

Question

我对Tailwind CSS和CSS总体都比较新手。

当按钮被禁用时，我需要让它们停止进行transform/transition效果。目前，禁用颜色变化被应用了，但是悬停时的转换/过渡仍然会发生。

我尝试使用disabled:transform-none和disabled:transition-none，但没有得到期望的结果。

正在使用的技术是- ReactJS, Tailwind CSS

以下是使用的类的示例代码片段：

<button 
    disabled={disableIt} 
    className="text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110  hover:blue-300 hover:shadow-md"
>
    Click me
</button>

注意：disableIt 是用于禁用或启用按钮的状态

我的tailwind.config.js文件的变体部分如下：

variants: {
    opacity: ({ after }) => after(["disabled"]),
    backgroundColor: ({ after }) => after(["disabled"]),
    textColor: ({ after }) => after(["disabled"]),
    hover: ({ after }) => after(["disabled"]),
    cursor: ({ after }) => after(["disabled"]),
    transition: ({ after }) => after(["disabled"]),
    transform: ({ after }) => after(["disabled"]),

    extend: {
      padding: ["hover"],
    },
  },

请帮助我。

- lAaravl

Answer 1

您可以使用 enabled 修改器，仅在按钮启用时应用某些类。

这使您可以指定只在按钮启用时添加的类，而不是在按钮被禁用时尝试“删除”某些类。

以下是基于您的原始代码的简单示例：

<button 
    disabled={disableIt} 
    className="enabled:transition enabled:transform 
        enabled:hover:translate-x-1 enabled:hover:blue-300"
>
    Click me
</button>

- dybzon

---

如果您只使用<button>，这是一个很好的选择。请注意：它不适用于<a>链接。 - clem

当你使用 a 并将其样式设置为看起来像一个 button 时，你正在做一些错误的事情。但如果这是要求，那么在这种情况下，你总是选择 pointer-events: none;，所以 :hover 将无法工作。 - dvlden

Answer 2

如果您希望禁用按钮不触发任何交互状态，例如:hover或active，您也可以简单地添加以下内容。

disabled:pointer-events-none

到顺风方向的 className。

- sebilasse

---

这个解决方案更加优雅！ - Alan Hortz

这很好，但我还想要 disabled:cursor-not-allowed，似乎两者不能同时应用...但愿意接受解决方案。 - wongz

算了，我已经想通了。enabled:hover:bg-red-100 可以工作。本质上是使用 enabled: 标签。如果您有一个自定义标签，比如 loading，那么就把 enabled:not(loading):hover:bg-red-100 放进去。这样只有在没有加载和未禁用时才会显示悬停颜色。 - wongz

Answer 3

在`tailwind.config.js`文件中。

variants: {
    extend: {
      opacity:["disabled"],
      cursor:["disabled"]
    },
  },

现在，如果你把 "disabled" 添加到 className 中，tailwind 将会把它作为修饰符提供。在修改配置文件后，一定要重新编译它。

className="text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110  hover:blue-300 hover:shadow-md"
>

这应该可以工作。

- Yilmaz

---

应用了你的更改，它还是不起作用。我仍然遇到转换问题。 - lAaravl

你正在使用webpack吗？ - Yilmaz

它在开发环境中，我不确定是否使用了Webpack。 - lAaravl

Answer 4

试试这个 ==>

<button 
   disabled={disableIt} 
    className="disabled:opacity-75 disabled:pointer-events-none text-xs rounded  bg- 
    gray-600 mx-1 transition duration-500 ease-in-out transform 
    hover:translate-x-1 hover:scale-110  hover:blue-hover:shadow- 
     md"
>Click me
</button>

- Bisrat

Answer 5

对我来说，使用jit而不需要变量配置是有效的。

这个例子使用纯HTML来展示如何完成，你需要将其改为React。

<div class="flex items-center justify-center min-h-screen">
  <button disabled class="px-4 py-2 text-white text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110 hover:blue-300 hover:shadow-md disabled:shadow-none">Disabled Click</button>
  <button class="px-4 py-2 text-white text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110 hover:blue-300 hover:shadow-md disabled:shadow-none">Click</button>
</div>

我留下一个例子https://play.tailwindcss.com/RBb3RtRB4B

- victoryoalli

Answer 6

我个人通过这样做达到了：

    <button
      disabled={!onClick}
      type="button"
      onClick={onClick}
      className={cx(
        `flex cursor-pointer flex-col items-center disabled:pointer-events-none disabled:cursor-default`,
        className,
      )}
    >

如果没有将onClick函数传递给我的组件，我会使用css禁用悬停和光标指针。

- BackSlashHaine