html - CSS 过渡和自动定位

Question

我有一个 div .box，它的绝对位置设置在父 div 的底部。它没有设置顶部位置，因为不同的 .box div 的高度不同。将鼠标悬停在父 div 上时，我想通过过渡效果将其 top 位置更改为 0。

在下面的代码中，如果我没有默认定义顶部位置，则转换将不起作用。我试过使用 top: auto 但它仍然不起作用。如何在不定义顶部位置的情况下使用过渡。

这是我的代码:

HTML:

<div class="wrap">
    <div class="box">
        Box
    </div>
</div>

CSS:

.wrap{
    position: relative;
    height: 200px;
    width: 200px;
    background: green;
}

.box{
    background: yellow;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all  0.9s ease 0s;
    top: 50%; /*== does not work without it ==*/
}

.wrap:hover .box{
    top: 0;
    bottom: 0;
}

fiddle : http://jsfiddle.net/5hs09apn/

Answer 1

与使用 top 略有不同的方法:http://jsfiddle.net/5hs09apn/2/

设置框的高度，悬停时将其设置为100%；让底部为零，所以你甚至不需要使用 top

.box{
    background: yellow;
    position: absolute;
    bottom: 0;
    left: 0;
   height:20px;
    transition: all  1s ease 0s;
}

.wrap:hover .box{
   height:100%;
    bottom: 0;
}

.wrap {
  position: relative;
  height: 200px;
  width: 200px;
  background: green;
}
.box {
  background: yellow;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 20px;
  transition: all 1s ease 0s;
}
.wrap:hover .box {
  height: 100%;
  bottom: 0;
}

<div class="wrap">
  <div class="box">
    Box
  </div>
</div>