Question

我正在使用仪表板，最近，亚当（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'工作且仅lg:translate-x-0'. This might be due as tailwindcss don't have transition as of yet. so my question is, how can i make桌面模式下才实现的问题，过度写入，.-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。但是在这里，to可以正常工作并解决了很多问题。

tailwaindcss中的Custominze过渡

1 个答案: