模态中的顺风高度过渡

Posted 2023-03-06

【中文标题】模态中的顺风高度过渡

【英文标题】：Tailwind height transition inside a modal

【发布时间】：2021-02-17 16:18:46

【问题描述】：

我有一个模态（用 React 编写，但没关系），在里面，我正在尝试添加一个手风琴。我的手风琴很好地上下滑动，我的问题是模态的高度会根据手风琴过渡立即上下跳跃。

有没有一种方法可以使模态高度沿着手风琴的过渡增长？ 谢谢

编辑：改写问题。

【参考方案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

【讨论】：

感谢您的回复，抱歉回复太慢了，我已经下班了。我的问题不是我不能让动画工作。手风琴起作用，模态转换（打开时淡入）起作用。问题是模态中的手风琴。模态高度立即跳跃，手风琴滑开。你知道如何让模态高度在过渡中增长吗？谢谢

由于我在寻找一种简单地将过渡应用到高度的方法时找到了这个答案，因此编辑您的帖子以反映这可以通过简单地使用 transition-all 来完成可能是值得的，不过它没有回答 OP 的问题。