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

Question

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

这就是我要找的：

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

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

我的目标是

1. 使标题始终保持在固定位置（中间）
2. 在标题尚未被发现时隐藏它

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

• 将position:fixed 用于h1 时，overflow becomes always visible。
• 当使用position:absolute时，位置isn't fixed correctly。
• 使用clip:rect(500px auto auto auto) 时，我无法使用%。因此，如果不使用 JavaScript，我无法确定视口的确切高度。

在没有 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（通过单击小提琴中的切换按钮），您应该会获得所需的效果。

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

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

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

作为替代方案，您可以翻译文本顶部的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>

Answer 5

这就是你想要的exemple。

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

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