如何揭开固定内容的 div

Question

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

这就是我要找的：

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

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

我的目标是

使标题始终保持在固定位置（中间）
隐藏未显示的标题

但这些是我的问题_{^{（包括小提琴）}}

当使用 position:fixed 时 h1 overflow becomes always visible.
使用position:absolute时位置isn't fixed correctly.
当使用 clip:rect(500px auto auto auto) 时，我失去了使用 % 的能力。因此，我无法在不使用 JavaScript.

如果没有 JS，还可以做些什么来实现所描述的行为？

Answer 1

这就是你想要的exemple。

你需要这样做。并查看示例中的 css。

<h1>Hello stranger</h1>
<div class="test"></div>

Answer 2

我认为您可以将 h1 从 position:absolute 更改为 fixed。

http://jsfiddle.net/o8d79jum/8/

div {
    position:absolute;
    overflow:hidden;
    top:100%;
    right:0;
    bottom:0;
    left:0;
    background:black;
    color:white;
    animation:ani 2s infinite;
}
h1 {
    position:fixed;
    top:50%;
    left:0;
    right:0;
    text-align:center;
    transform:translateY(-50%);
    margin:0;
}
@keyframes ani {
    0% {
        top:100%;
    }
    100% {
        top:0%;
    }
}

<div>
     <h1>Hi, I'm centerized</h1>
</div>

Answer 3

这是我的尝试，使用伪元素隐藏 h1

此伪元素具有任意高的高度，并且始终位于 div.

的上侧

div:after {
    content: "";
    position: absolute;
    height: 9999px;
    width: 100%;
    bottom: 100%;
    background-color: white;
}

fiddle

Answer 4

解决方案是同时将 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 class 应用于 div（通过单击 fiddle 中的开关），您应该会获得所需的效果。

这里需要注意的重要事项是 3d 变换的使用。这些比动画 top 或 margins 更流畅，并利用设备 GPU for Hardware acceleration 来实现这一点。

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

Answer 5

作为替代方案，您可以翻译文本顶部的 div:after：

fiddle

$$('button').first().on('click', function(e){ $$('body').first().toggleClassName('animate'); });

body{
    margin:0
}


div {
     position:absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    overflow:hidden
}

div:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 100%;
    background-color: black;
    top:0;
    z-index:999;
}
h1 {
    position:absolute;
    color:red;
    top:50%;
    left:0;
    right:0;
    text-align:center;
    transform:translateY(-50%);
}

.animate div:after {
    animation-name:ani;
    animation-duration:2s;
    animation-fill-mode: forwards;
}

@keyframes ani {
    0% {
        transform: translateY(0);
    }
    
    100% {
       transform: translateY(-100%);
    }
}
button{position:absolute;top:5px;left:5px;
z-index:9999}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.2/prototype.min.js"></script>
<div><h1>Hi, I'm centerized</h1></div>


<button>Start</button>

如何揭开固定内容的 div

How to unveil a div with fixed contents

css

css-position

overflow