时间戳

首页 > 解决方案 > max-height Transition 使子元素始终位于父元素的底部

css - max-height Transition 使子元素始终位于父元素的底部

问题描述

我正在与非常简单的问题作斗争。部分会在悬停时更改其最大高度。小跨度文章article__tag应始终位于其父级（绿线）的底部，无论该行将增长多少并共享其缓动动画和延迟。

这就是我所拥有的：

section{
  background: #000;
  color: #fff;
  display: flex;
  max-height: 150px;
  border-bottom: 1px solid lightgreen;
  transition: max-height .5s ease-in-out;
  position: relative;
  overflow: hidden;
}


section:hover {
  max-height: 400px;
  transition-delay: .3s;
}

article {
  flex:1;
  height: 200px
}

.article__tag {
  background: white;
  color: #000;
  position: absolute;
  padding: 10px;
  top: 120px;
  transition: all .5s ease-in-out;
  transition-delay: .3s;
}

section:hover .article__tag {
  bottom: 0;
  top: inherit;
}
<section>
  <article>A</article>
  <article><span class="article__tag">tag</span></article>
</section>
<section>
  <article>B</article>
  <article><span class="article__tag">tag</span></article>
</section>

https://codepen.io/t-book/pen/LYpjVPz

我的问题是，鼠标离开时，白色标签会迅速跳起来。此外，我已经用165px我无法预见的值定义了它的顶部，因为行具有不同的内容。

如何始终将标签定位在当前最大高度底部？

标签： css

解决方案

始终将 article_tag 保持在底部：

section{
  background: #000;
  color: #fff;
  display: flex;
  max-height: 150px;
  border-bottom: 1px solid lightgreen;
  transition: max-height .5s ease-in-out;
  position: relative;
  overflow: hidden;
}


section:hover {
  max-height: 400px;
  transition-delay: .3s;
}

article {
  flex:1;
  height: 200px
}

.article__tag {
  background: white;
  color: #000;
  position: absolute;
  padding: 10px;
  bottom: 0px;
  transition: all .5s ease-in-out;
  transition-delay: .3s;
}
<section>
  <article>A</article>
  <article><span class="article__tag">tag</span></article>
</section>
<section>
  <article>B</article>
  <article><span class="article__tag">tag</span></article>
</section>

推荐阅读