使全屏div从上往下动画化

Question

我有一个全屏覆盖，我目前在jfiddle中设置了它，所以它会逐渐消失http://jsfiddle.net/9NJP9/1/我希望它能做的不是渐变，而是从屏幕顶部向下动画；向下滑动。当点击按钮时，我的网站比屏幕高度长，尽管我真的不希望它从整个网站的顶部一直滑到页面的底部，只是从屏幕的顶部滑到屏幕的底部，然后即使有人滚动也会保持在那里。我只是不知道如何操作css来做到这一点。

我能得到的任何帮助都将是伟大的，谢谢。

Answer 1

这里，http://jsfiddle.net/9NJP9/8/

对于向下滑动效果，您可以将top属性从-500px或-50%更改为0，而不是将opacity从0更改为1。在小提琴中，我已经将其设置为从-100%过渡到0。此外，您需要使效果与跨浏览器兼容，而不是仅用于webkit浏览器的CSS。我相应地修改了CSS。

.fullscreen_hide {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    position: absolute;
    z-index: 1000;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: -100%;
    bottom: 0;
    right: 0;
    left: 0;
    background: #141414;
}
.fullscreen_show {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    position: absolute;
    height: 100%;
    z-index: 1000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #141414;
}

正如@MichaelGiovanniPumo所指出的，您也应该尝试jQuery。它使生活更加舒适