【问题标题】:Why does my tailwind height transition not apply to an image element?为什么我的顺风高度过渡不适用于图像元素?
【发布时间】:2021-10-19 18:09:35
【问题描述】:

我正在尝试在图像上实现过渡,因此当我将鼠标悬停在其上时,图像会以平滑过渡的方式展开。我在 Tailwind Play https://play.tailwindcss.com/QfZSly1nEB 上重新创建了我的问题。

如图所示,将鼠标悬停在图像上会按预期工作,并且图像大小会发生变化,但它并没有像预期的那样设置动画。我遵循了docs 中关于转换属性的指导,但没有运气

【问题讨论】:

    标签: tailwind-css


    【解决方案1】:

    这是因为 h-auto 类。如果将其更改为绝对值,则转换将起作用。

    https://play.tailwindcss.com/C68QXPaQs0

    【讨论】:

    • 啊,这就解释了。有什么方法可以启用它,以便它与h-auto 一起使用。由于图像大小是动态的,因此在我的用例中具有绝对值实际上并不适用
    • @hcphoon 你必须自定义你的规模。在 taiklwindCSS 配置文件中查看来自 CorySheppard, Customizie 的回答。
    【解决方案2】:

    Maik 的答案非常有效,但如果您希望它集中在同一个地方,您也可以选择在悬停时使用缩放。

    https://play.tailwindcss.com/JISPGXFeIT

    【讨论】:

      猜你喜欢
      • 2018-11-15
      • 1970-01-01
      • 2021-02-17
      • 1970-01-01
      • 1970-01-01
      • 2020-01-29
      • 2019-05-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多