悬停

时间:2016-08-17 22:50:53

标签: html css css3 css-animations frontend

背景非常简单,当用户悬停/点击时,我希望从元素的底部向上滑动一个小标题。见图1.

Figure 1, Text slides up on hover

有点挖掘说用CSS无法做到这一点,但我真的不明白为什么。几个小时后,我想我已经非常接近解决它,但我不能跳到最后的障碍。

我的逻辑是,如果你的父元素有overflow: hidden,并且你绝对将标题放在父元素的底部,你可以使用过渡属性为位置值设置动画,使其向上滑动。纯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(我在这里转换为vanilla 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%;
}

我觉得接近的原因是,在这个阶段,弹出窗口基本上可以工作,但它内部的内容应该与容器的底部对齐。从本质上讲,这是一个古老的技巧,将绝对定位的元素的顶部和底部设置为“0”,但用于从容器下方制作动画。

为什么我要设置顶部和底部属性的动画?如果您只使用“顶部”值,则可以通过设置top:100%来隐藏元素,但您无法为其设置动画,因此它将停留在父级的底部。您需要将top设置为特定值(父级的高度减去弹出内容的高度),弹出内容/父级可以是任何大小。您可以设置bottom:-100% - 这实际上有效,您可以设置为bottom:0%的动画,然后在父级的底部弹出窗口。一切都很好,没有必要设置一个顶级值。但是,它不能令人满意,你必须将滑块放在父母的下方并将其设置为动画,由于各种原因与其他动画相关,会产生严重的时间效果。

因此,这里我们将弹出元素放在父级的底部,没有高度,因为顶部和底部值重合,内容向下溢出。完善。然后顶部值动画,弹出元素现在有top:0; bottom:0,填充父级,如果只有我可以让内容坚持到底部,那么一切都会很好。

这最后一点通常不太难。我们有纵向对齐和整个flex的世界,但它们似乎都会产生错误和错误并导致我失误。任何人的想法?在这一点上,我必须继续前进,只使用javascript,但我觉得这是一个值得解决的问题。

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

只需让.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>

答案 2 :(得分:0)

调整bundles的{​​{1}}和data : {comments: this.comments, recipient: this recipient} 属性,并将背景颜色移动到div,而不是它的子跨度。这里不需要特定的高度。它应该是动态的。

top:
bottom: