CSS悬停触发垂直滑动动画标题

Question

我想要一个从负顶部垂直滑动到视图中的标题栏。

而不是简单地看起来像是在窗帘后面。

以下内容使用高度设置动画：-

https://jsfiddle.net/AaronNGray/kf0br46u/31/

HTML

<div id="box">
<div id="content">AaronNGray</div>
</div>

CSS

body {
margin: 0px;
padding: 0px;
}
#box {
height: 100px;
width: auto;
background: transparent;
transition: all 0.4s ease-in-out;
}
#content {
overflow: hidden;
width: auto;
background: white;
height: 0px;
transition: all 0.4s ease-in-out;
border-bottom: 2px solid black;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
#box:hover > #content {
height: 50px;
top: 0px;
}

我需要的是能够设置top的动画，以便内容div从屏幕顶部向下滑动。

这是我尝试过的，但它不起作用：-

https://jsfiddle.net/AaronNGray/kf0br46u/40/

body {
margin: 0px;
padding: 0px;
}
#box {
height: 100px;
top: -50px;
width: auto;
background: transparent;
transition: top 0.4s ease-in-out;
}
#content {
overflow: hidden;
width: auto;
background: white;
top: -50px;
height: 50px;
transition: top 0.4s ease-in-out;
border-bottom: 2px solid black;
-webkit-transition: top .8s ease;
-moz-transition: top .8s ease;
-ms-transition: top .8s ease;
-o-transition: top .8s ease;
}
#box:hover > #content {
top: 0px;
}

希望你能帮忙，这可能是我缺少的一些简单的东西，通常是：(

Answer 1

有几个问题。

首先，如果没有定义元素的位置，则使用例如top进行定位是不起作用的(如果是，则定位是相对于其自身所定位的第一祖先的(。

其次，box元素的位置是-50像素(其高度的一半(，这很好，但内容是-50像素，这将使它处于-100像素(如果它被定位的话(。

以下是您的代码片段，其中更改了以下两项内容：

body {
margin: 0px;
padding: 0px;
position: relative;
}
#box {
height: 100px;
top: -50px;
width: auto;
transition: top 0.4s ease-in-out;
position: relative;
}
#content {
overflow: hidden;
position: relative;
top: 0px;
width: auto;
height: 50px;
transition: top 0.4s ease-in-out;
border-bottom: 2px solid black;
}
#box:hover #content {
top: 50px;
}

<div id="box">
<div id="content">AaronNGray</div>
</div>

Answer 2

StackOverflow垄断了谷歌和互联网，并通过阻止人们提出他们真正需要问的问题来滥用这一垄断。你可能会认为这个问题很愚蠢，但你再也没有其他地方可以得到CSS的答案了——你已经扼杀了所有其他的CSS论坛！！！！！