Tailwind Headless UI Transition 在 y 轴上不起作用

Answer 1

不会发生 Y 轴转换，因为

translateY(100%)

和

translateY(0)

对于您应用它的元素来说是相同的。

100%

中的

translateY(100%)

是相对于它所应用到的元素的高度而言的，因此对于具有

0

高度的元素：

translateY(100%)

相当于

translateY(0)

。该元素具有

0

高度，因为它唯一的子元素具有

position: fixed

，从而将子元素从布局流中取出。该元素没有其他子元素，因此它将解析为

0

高度。

要解决此问题，您可以考虑从某个不依赖于元素本身高度的长度值进行转换。例如，一旦可以推断出您想要转换视口的高度，因此我们可以使用

100vh

:

<Transition
  show={open}
  enter="transform transition ease-in-out duration-300 "
  enterFrom="translate-y-[100vh] opacity-0"
  enterTo="translate-y-0  opacity-100"
  leave="transform transition ease-in-out duration-300 "
  leaveFrom="translate-y-0 opacity-100"
  leaveTo="translate-y-[100vh] opacity-0"
>

请参阅此 StackBlitz 项目，了解此代码的工作原理。