悬停时的纯 CSS3 动画 slide-up 字幕

Question

背景非常简单，我想在用户 hovers/taps 时从元素底部向上滑动一个小标题。见图 1。

一点挖掘说这无法使用 CSS 完成，但我真的不明白为什么。几个小时后，我觉得我已经很接近解决它了，但我无法跳过最后的障碍。

我的逻辑是，如果你的 parent 元素有 overflow: hidden，并且你绝对将标题放在 parent 的底部，你可以使用transition 属性，所以它向上滑动。纯CSS宝贝！

您不能设置高度动画 - 文本被压碎，元素必须作为一个块移动（尽管不一定呈现为 display:block）。

这是我到目前为止所要做的 https://jsfiddle.net/zufwavpn/。 HTML,

<div class="item-wrapper">
  <div class="content">
    Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
  </div>
  <div class="popup-title">
    <span>A title for my content</span>
  </div>
</div>

还有 CSS（我在这里转换为原版 CSS），

.item-wrapper{
    height:22rem;
    position:relative;
    overflow:hidden;
    color:white;
    font-family:sans-serif;
  }

  .content{
    height:100%;
    background-color:red;
    padding:10px;
  }

  .popup-title{
    position:absolute;
    top:100%;
    bottom:0%;
    width:100%;
    transition: bottom 0.5s, top 0.5s;
    vertical-align: bottom;
  }

.popup-title span{
    display:block;
    margin:0;
    background-color: black;
}

.item-wrapper:hover .popup-title{
    bottom:0%;
    top:0%;
}

之所以觉得接近，是因为在这个阶段，popup基本可以了，但是里面的内容应该是和容器底部对齐的。本质上，这是将绝对定位元素的顶部和底部设置为“0”但用于从容器下方设置动画的古老技巧。

为什么要为顶部和底部属性设置动画？如果您只使用 'top' 值，您可以通过设置 top:100% 来隐藏该元素，但您不能对其进行动画处理，因此它将停留在parent 的底部。您需要将顶部的特定值设置为（parent 的高度减去弹出内容的高度），并且弹出内容/parent 可以是任何大小。您可以设置 bottom:-100% - 这确实有效，您可以将动画设置为 bottom:0%，并在 parent 底部弹出剩余部分。一切顺利，无需设置最高值。但是，这并不令人满意，您必须将滑块放置在 parent 下方并为其设置动画，由于与其他动画有关的各种原因，这会产生糟糕的定时效果。

因此，此处弹出元素位于 parent 的底部，没有高度，因为顶部和底部值重合，并且内容向下溢出。完美的。然后顶部的值动画起来，弹出元素现在有 top:0; bottom:0，填充 parent，如果我能让内容粘在底部就好了。

这最后一点通常不会太难。我们有 vertical-align，还有整个 flex 世界，但它们似乎都会产生错误和漏洞，让我陷入困境。有什么想法吗？在这一点上，我必须继续前进并只使用 javascript，但我觉得这是一个值得单独解决的问题。

Answer 1

简单地使 .popup-title 具有负 bottom 位置（根本不需要 top 值）并在悬停时将其转换为 0.

.item-wrapper {
  height: 22rem;
  position: relative;
  overflow: hidden;
  color: white;
  font-family: sans-serif;
}
.content {
  height: 100%;
  background-color: red;
  padding: 10px;
}
.popup-title {
  position: absolute;
  bottom: -100%;
  width: 100%;
  transition: bottom 0.5s, top 0.5s;
  vertical-align: bottom;
}
.popup-title span {
  display: block;
  margin: 0;
  background-color: black;
}
.item-wrapper:hover .popup-title {
  bottom: 0;
}

<div class="item-wrapper">
  <div class="content">
    Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
  </div>
  <div class="popup-title">
    <span>A title for my content</span>
  </div>
</div>

Answer 2

.item-wrapper {
  height:22rem;
  position:relative;
  overflow:hidden;
  color:white;
  font-family:sans-serif;
}

.content {
  height:100%;
  background-color:red;
  padding:10px;
}

.popup-title {
  position:absolute;
  top:100%;
  width:100%;
  transition: transform 250ms;
  vertical-align: bottom;
}
.popup-title span {
  display:block;
  margin:0;
  background-color: black;
}

.item-wrapper:hover .popup-title {
  transform:translateY(-100%);
}

<div class="item-wrapper">
  <div class="content">
    Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
  </div>
  <div class="popup-title">
    <span>A title for my content</span>
  </div>
</div>

Answer 3

调整了 .popup-title 的 top: 和 bottom: 属性，并将背景颜色移动到 div，而不是它的子跨度。这里不需要特定的高度。它应该是动态的。

.item-wrapper{
    height:12rem;
    position:relative;
    overflow:hidden;
    color:white;
    font-family:sans-serif;
  }
  
  .content{
    height:100%;
    background-color:red;
    padding:10px;
  }
  
  .popup-title{
    position:absolute;
    bottom: -101%;
    width:100%;
    transition: bottom 0.5s, top 0.5s;
    vertical-align: bottom;
      background-color: black;
  }

.popup-title span, .popup-title p{
      display:block;
      margin:0;
      padding: 10px;
}

.item-wrapper:hover .popup-title{
        bottom: 0;
}

<div class="item-wrapper">
  <div class="content">
    Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
  </div>
  <div class="popup-title">
    <span>A title for my content. Height of the content here is irrelevant.</span>
  </div>
</div>
<br />

<div class="item-wrapper">
  <div class="content">
    Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
  </div>
  <div class="popup-title">
    <p>The popup div should expand as necessary. Even if there are multiple sentences or paragraphs.</p>
    <p>Just dont' make it taller than the wrapper div</p>
  </div>
</div>

悬停时的纯 CSS3 动画 slide-up 字幕

Pure CSS3 animated slide-up caption on hover

html

css

frontend

css-animations