css - 在 tailwind css 中自定义过渡

Question

我正在研究仪表板，最近 adam (tailwindcss) 在 trello 的看板上制作了一个类似仪表板的屏幕。我喜欢它并且正在努力实现它。我遇到的问题与他在屏幕播放中使用的过渡效果有关。他们还没有在 tailwindcss 中，但将来他们会。我做了一些挖掘并能够实现它。但是问题如下。

.translate-x-full {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.-translate-x-full {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.translate-x-0 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

这是进行转换的 css 代码，它运行良好，因为我只在桌面模式下遇到问题，其中 .-translate-x-full 即使我使用 lg:translate -x-0'。 这可能是因为 tailwindcss 目前还没有过渡。所以我的问题是，我怎样才能使 lg:translate-x-0' 工作并覆盖 .-translate-x-full 效果。

下面是旁边菜单的代码:

<div 
:class="sideBarOpen ? 'translate-x-0 ease-out transition-medium': '-translate-x-full ease-in transition-medium'"
class="aside fixed z-30 inset-y-0 left-0 w-64 px-8 py-4 bg-gray-100 border-r border overflow-auto lg:translate-x-0 lg:static lg:inset-auto"
>
</div>

Answer 1

找到了我需要的解决方案。

为了让我的自定义 css 响应，我只需要将它放在一个 responsive 包装器中，如下所示:

@responsive {

.translate-x-full {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.-translate-x-full {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.translate-x-0 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}


}

它创建了所有必需的类。另外，通常情况下，以 - 为开头的类 .-class-name 由于某些未知原因不会合并到普通 css 中。但在这里它正在工作并解决了很多问题。