jquery - 如何添加整页过渡？ (见说明)

Question

我正在使用 HTML5 和 CSS3 创建一个网站，并且我正在考虑拥有一个仅包含背景图像的首页以及使用箭头或“进入站点”按钮进入网站的选项。

但不是单击按钮而是将您带到另一个 html 文件/新站点(当您单击标准导航中的链接时)我希望它从底部淡入 - 就像“从底部淡入淡出”选项这里http://tympanus.net/Development/PageTransitions/ - 到同一 html 文档中的新页面(普通首页)，因此访问者不必加载新页面。

有人吗？

(PS。我尝试了上面链接中的功能，但无法让它工作)

Answer 1

如果您只需要“从底部淡出”，您需要 Modernizr、pagetransitions.js 和 animations.css 来获得同样的效果，您可以使用这个修改过的 pagetransitions.js

var PageTransitions = (function() {

    var $main = $( '#pt-main' ),
            $pages = $main.children( 'div.pt-page' ),
            $iterate = $( '#iterateEffects' ),
            animcursor = 1,
            pagesCount = $pages.length,
            current = 0,
            isAnimating = false,
            endCurrPage = false,
            endNextPage = false,
            animEndEventNames = {
                    'WebkitAnimation' : 'webkitAnimationEnd',
                    'OAnimation' : 'oAnimationEnd',
                    'msAnimation' : 'MSAnimationEnd',
                    'animation' : 'animationend'
            },
            animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
            // support css animations
            support = Modernizr.cssanimations;

    function init() {
            $pages.each( function() {
                    var $page = $( this );
                    $page.data( 'originalClassList', $page.attr( 'class' ) );
            } );
            $pages.eq( current ).addClass( 'pt-page-current' );
            $iterate.on( 'click', function() {
                    if( isAnimating ) {
                            return false;
                    }
                    nextPage( animcursor );
                    ++animcursor;
            } );
    }

    function nextPage(options ) {
            var animation = (options.animation) ? options.animation : options;
            if( isAnimating ) {
                    return false;
            }
            isAnimating = true;
            var $currPage = $pages.eq( current );
            if(options.showPage){
                    if( options.showPage < pagesCount - 1 ) {
                            current = options.showPage;
                    }
                    else {
                        return false;
                    }
            }
            else{
                    if( current < pagesCount - 1 ) {
                            ++current;
                    }
                    else {
                         return false;
                    }
            }
            var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
                    outClass = '', inClass = '';
              outClass = 'pt-page-fade';
              inClass = 'pt-page-moveFromBottom pt-page-ontop';
            $currPage.addClass( outClass ).on( animEndEventName, function() {
                    $currPage.off( animEndEventName );
                    endCurrPage = true;
                    if( endNextPage ) {
                            onEndAnimation( $currPage, $nextPage );
                    }
            } );
            $nextPage.addClass( inClass ).on( animEndEventName, function() {
                    $nextPage.off( animEndEventName );
                    endNextPage = true;
                    if( endCurrPage ) {
                            onEndAnimation( $currPage, $nextPage );
                    }
            } );
            if( !support ) {
                    onEndAnimation( $currPage, $nextPage );
            }

    }

    function onEndAnimation( $outpage, $inpage ) {
            endCurrPage = false;
            endNextPage = false;
            resetPage( $outpage, $inpage );
            isAnimating = false;
    }

    function resetPage( $outpage, $inpage ) {
            $outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
            $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
    }
    init();
    return { 
            init : init,
            nextPage : nextPage,
    };

})();    

CSS

/* move from / to  */
.pt-page-moveFromBottom {
    -webkit-animation: moveFromBottom .6s ease both;
    -moz-animation: moveFromBottom .6s ease both;
    animation: moveFromBottom .6s ease both;
}
/* fade */
.pt-page-fade {
    -webkit-animation: fade .7s ease both;
    -moz-animation: fade .7s ease both;
    animation: fade .7s ease both;
}

/* move from / to  */
@-webkit-keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); }
}
@-moz-keyframes moveFromBottom {
    from { -moz-transform: translateY(100%); }
}
@keyframes moveFromBottom {
    from { transform: translateY(100%); }
}

/* fade */

@-webkit-keyframes fade {
    to { opacity: 0.3; }
}
@-moz-keyframes fade {
    to { opacity: 0.3; }
}
@keyframes fade {
    to { opacity: 0.3; }
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #fff;
    background: #333;
    overflow: hidden;
}
html, body { height: 100%; }
.pt-perspective {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
}

.pt-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.pt-page-current,
.no-js .pt-page {
    visibility: visible;
    z-index: 1;
}

.no-js body {
    overflow: auto;
}

.pt-page-ontop {
    z-index: 999;
}

.pt-page-1 {
    background: #0ac2d2;
}

.pt-page-2 {
    background: #7bb7fa;
}

.no-js .pt-triggers {
    display: none;
}    

html

<div id="pt-main" class="pt-perspective">
    <div class="pt-page pt-page-1">     
         <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
         <div class="pt-triggers">
             <button id="iterateEffects" class="pt-touch-button">Show next page transition</button>                      
         </div>
    </div>
    <div class="pt-page pt-page-2">
        <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
    </div>
</div>    

http://jsfiddle.net/7tjgy/