在tailwaindcss中自定义过渡

Posted 2023-03-07

【中文标题】在tailwaindcss中自定义过渡

【英文标题】：Custominze transition in tailwaindcss

【发布时间】：2020-03-12 12:41:02

【问题描述】：

我正在开发仪表板，最近 adam (tailwindcss) 在 trello 的看板上进行了屏幕投射，例如仪表板。我喜欢它并试图实现它。我遇到的问题与他在屏幕投射中使用的过渡效果有关。他们还没有顺风顺水，但将来会。我做了一些挖掘并能够实现它。但问题如下。

.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'. This might be due as tailwindcss don't have transition as of yet. so my question is, how can i makelg:translate-x-0' 工作并重写，@ 987654324@效果。

下面是旁边菜单中的代码：

<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>

【参考方案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。但在这里，它正在工作并解决了很多问题。