模态内部的顺风高度转换

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

干杯Alan

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