css - 如何揭开具有固定内容的 div

Question

我通过从页面底部揭开元素来为元素设置动画。子元素的位置不应受揭幕动画大小变化的影响。

这就是我要找的:

<div>
    <h1>Hello stranger</h1>
</div>

两个元素都定位 absolute将顶部、右侧、底部和左侧设置为 0 .通过降低 top 显示内容的 div来自 100%至 0% .有一个 Fiddle .

我的目标是

使标题始终处于固定位置(中间)

未发现时隐藏标题

但这些是我的问题(包括 fiddle )

使用 position:fixed 时对于h1 overflow becomes always visible .

使用 position:absolute 时职位isn't fixed correctly .

使用 clip:rect(500px auto auto auto) 时我无法使用 % .因此，如果不使用 JavaScript，我无法确定视口(viewport)的确切高度。

在没有 JS 的情况下，还可以做些什么来归档所描述的行为？

Answer 1

解决方法是移动h1与 div 的方向相反动画同时给人一种错觉，h1一直保持静止。然而 h1实际上也相对于 div 移动只是在相反的方向。

我保留了相同的标记以及 position: absolute; top: 0; right:0; left:0; bottom: 0;您对这两个要素的要求。

http://jsfiddle.net/eLbcdc9c/6/

HTML

<div>
    <h1>Hello stranger</h1>
</div>

CSS

div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    transform: translate3d(0, 0%, 0);
    overflow: hidden;
}

h1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    text-align: center;
    transform: translate3d(0, 50%, 0);
}

/* Transition effect and timing must be the same for both elements to give the perfect illusion */
div,
h1 {
    transition: transform 500ms ease-in;
}

/* The transform class added to the div to begin the animation on the h1 and div at the same time */
.hide {
    transform: translate3d(0, 100%, 0);
}
.hide h1 {
    transform: translate3d(0, -50%, 0);
}

申请 hide类到 div (通过单击 fiddle 中的切换)，您应该获得所需的效果。

这里需要注意的重要事项是 3dtransforms 的使用。这些比动画更流畅 top或 margins并利用使用设备 GPU for Hardware acceleration为达到这个。

3d 转换为 very well supported但在某些情况下，您可能需要应用浏览器前缀，具体取决于您要提供的支持。