Question

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

这就是我在寻找的东西：

goal

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

这两个元素都位于absolute的顶部，右侧，底部和底部。左设置为0。通过将top的{{1}}从div降低到100%来揭示内容。 拥有Fiddle。

我的目标是

将标题始终保持在固定位置（中间）
隐藏尚未发现的标题

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

将0%用于position:fixed h1 becomes always visible。
使用overflow位置isn't fixed correctly。
使用position:absolute时，我无法使用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

＆＃13;

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

＆＃13;

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}

＆＃13;

<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>

＆＃13;

Answer 5

这就是你想要的exemple。

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

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

如何揭示固定内容的div

5 个答案: