时间戳

首页 > 解决方案 > 在tailwaindcss中自定义过渡

css - 在tailwaindcss中自定义过渡

问题描述

我正在制作仪表板，最近 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' 工作和重写，.-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>

标签： csssasscss-transitionstailwind-css

解决方案

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

为了使我的自定义 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);
}


}

它创建了所有必需的类。另外通常，由于某些未知原因，具有-as start like 的类.-class-name不会合并为 normall css。但在这里，它正在工作并解决了很多问题。

推荐阅读