区块平滑过渡

Question

我有这个codepen https://codepen.io/sirlouen/pen/rNbdGmB

尝试了多种方法后，我不知道如何使块从下到上平滑过渡，而不是立即弹出。

.image-container {
  position: relative;
  width: 300px; 
  height: 200px;
  background: rgba(0, 0, 0, 0.3);
}

.text-content {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7); 
  color: #fff; 
  padding: 10px; 
  width: 100%;
  box-sizing: border-box;
  transition: display 0.5s ease-in-out; /* This doesn't work */
  text-align: center;
}

.hidden-text {
  display: none; /* Hide initially */
  margin-top: 10px; /* Add spacing between visible and hidden texts */
}

.image-container:hover .hidden-text {
  display: block; /* Show on hover */
}

.image-container:hover .arrow {
  transition: opacity 0.5s ease; /* Smooth transition to hide for the arrow */
  opacity: 0;
}

<div class="image-container">
  <div class="text-content">
    <span class="visible-text">Visible text <span class="arrow">▼</span></span>
    <span class="hidden-text">This is some additional text that will be revealed when you hover over the visible part.</span>
  </div>
</div>

读完后，我发现显示不应用过渡 CSS 显示属性上的转换 CSS 从无显示到显示块的过渡，带子导航的导航

但不能 100% 确定如何将这种可见性机制应用到我的场景中。因为在这些情况下，文本仅从隐藏状态出现。但就我而言，该块实际上向上移动（这就是我想要过渡的，而不仅仅是文本本身）

我已经看到了一些使用

max-height

并转换此属性的选项，但我觉得这不是一个足够的解决方案，因为我被迫达到给定的高度，而不是适应已经可见的文本（除非我错过了一些东西） )

这就是想法：https://codepen.io/sirlouen/pen/ExJEwdy

但是，我把它调整为25%，因为

max-height

，这并不理想。如果可见文本有两行，则箭头将被隐藏，因为它将低于最大高度。

有什么想法可以解决这个问题吗？

Answer 1

您可以将过渡应用到

max-height

并使用

overflow: hidden

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
  background: rgba(0, 0, 0, 0.3);
}

.text-content {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  transition: display 0.5s ease-in-out;
  /* This doesn't work */
  text-align: center;
}

.hidden-text {
  display: block;
  max-height: 0;
  overflow: hidden;
  margin-top: 10px;
  transition: max-height 0.5s ease;
}

.image-container:hover .hidden-text {
  /* Show on hover */
  max-height: 200px;
}

.image-container:hover .arrow {
  transition: opacity 0.5s ease;
  /* Smooth transition to hide for the arrow */
  opacity: 0;
}

<div class="image-container">
  <div class="text-content">
    <span class="visible-text">Visible text <span class="arrow">▼</span></span>
    <span class="hidden-text">This is some additional text that will be revealed when you hover over the visible part.</span>
  </div>
</div>