悬停的动画元素高度

发布于 2025-01-24 23:13:06 字数 1267 浏览 5 评论 0 原文

我正在尝试为悬停上的某些元素的高度启动。我使用 max-height 来操纵动画：您在这里看到：

.container {
  height: auto;
}

.hiddenContent {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 1s ease;
}

.container:hover>.hiddenContent {
  max-height: 250px;
  transition: max-height 1s ease;
}

<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>

<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>

<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>

当我从一个元素导航到另一个元素时出现问题：2动画（开头一个和结尾）不是同时进行的。闭合一开始时，开头完成。我该如何解决？

谢谢

原文

I'm trying to animate the height of some elements on hover. I used the max-height to manipulate the animation as you can see here:

.container {
  height: auto;
}

.hiddenContent {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 1s ease;
}

.container:hover>.hiddenContent {
  max-height: 250px;
  transition: max-height 1s ease;
}

<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>

<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>

<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>

The problem appears when I navigate from an element to an other: the 2 animation (the opening-one and the closing-one) are not simultaneous. The closing-one starts when the opening-one finishes. How can I solve this?

Thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

此刻的回忆 2025-01-31 23:13:07

那是因为您正在动画Max-Height。
这是我发现的一个很好的解释：

CSS同时过渡

.container {
  height: auto;
}

.hiddenContent {
  height: 0px;
  overflow: hidden;
  transition: height 1s ease;
}

.container:hover .hiddenContent {
  height: 150px;
  transition: height 1s ease;
}

that's because you're animating max-height.
Here's a good explanation I found:

CSS transition simultaneous

just try to animate height

.container {
  height: auto;
}

.hiddenContent {
  height: 0px;
  overflow: hidden;
  transition: height 1s ease;
}

.container:hover .hiddenContent {
  height: 150px;
  transition: height 1s ease;
}

回复收藏 0 原文

~没有更多了~