CSS 从 top:100% 到 bottom:0 的过渡或动画滑动

Question

内部 div 的高度可变，具体取决于内部文本的长度，它始终比外部 div 短。当悬停外部 div 时，我希望内部覆盖层 div 从 top:100% 向上滑动到 bottom:0。我下面的 CSS 代码没有产生我想要的向上滑动效果。它只是在外部 div.

的底部弹出内部 div

<div class="outer">
    <div class="inner">This is a content block.</div>
</div>

.outer {
    position:relative;
    background-color:#eee;
    width:150px; height:150px;
    overflow:hidden;
}
.inner {
    position:absolute; z-index:10;
    box-sizing:border-box; width:100%; padding:10px;
    background-color:rgba(0,0,0,0.5); color:#fff;
    left:0; right:0; top:100%; bottom:auto;
    transition:top 300ms, bottom 300ms;
}
.outer:hover .inner {
    top:auto; bottom:0;
}

Answer 1

您的代码无法运行，因为转换不起作用 from/to auto.

您可以默认设置 bottom:0 并使用 transfom，例如

.outer {
    position:relative;
    background-color:#eee;
    width:150px; height:150px;
    overflow:hidden;
}
.inner {
    position:absolute; z-index:10;
    box-sizing:border-box; width:100%; padding:10px;
    background-color:rgba(0,0,0,0.5); color:#fff;
    left:0; right:0; bottom:0;
transform: translateY(100%);
    transition: transform 300ms;
}
.outer:hover .inner {
    transform: translateY(0);
}

CSS 从 top:100% 到 bottom:0 的过渡或动画滑动

CSS transition or animate slide up from top:100% to bottom:0

css

animation

transition