模态内的顺风高度过渡

Question

我有一个模态（用 React 编写，但这并不重要）在里面，我想添加一个手风琴。我有手风琴很好地上下滑动，我的问题是模式的高度根据手风琴过渡立即上下跳跃。

有没有办法让模态高度在手风琴旁边的过渡中增长？谢谢

编辑：改写问题。

Answer 1

将以下行添加到您的 tailwind.config.js 文件并重建您的 CSS 静态文件：

theme: {
    extend: {
      transitionProperty: {
        'height': 'height'
      }
    }
  }

现在您应该能够使用高度作为过渡属性：

transition-height duration-500 ease-in-out

如果您想简单地测试动画，假设将鼠标悬停在手风琴上，您还可以将以下内容添加到配置文件中：

variants: {
    height: ['responsive', 'hover', 'focus']
}

如果您现在在任何 div 上使用以下类，动画应该可以顺利运行：

bg-green-500 transition-height duration-500 ease-in-out h-8 hover:h-20

干杯艾伦

Tailwind 文档：https ://tailwindcss.com/docs/transition-property#app