最简单的方法来进行CSS页面转换

时间：2014-12-22 22:18:50

标签： jquery css layout slider transition

这是我第一次发帖，但我正在努力做到这一点。怎么了？这是html，css和js。

    <div class="pt-wrapper">
    <div class="pt-trigger-container">
        <button class="pt-trigger" data-animation="1" data-goto="1">Go to page 1</button>
        <button class="pt-trigger" data-animation="2" data-goto="2">Go to page 2</button>
    </div>


    <div class="pt-page pt-page-1">
        <h1><strong>Page 1</strong></h1>
    </div>
    <div class="pt-page pt-page-2">
        <h1><strong>Page 2</strong></h1>
    </div>
</div>

     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'
        },
        // animation end event name
        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' );

        $( '#dl-menu' ).dlmenu( {
            animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' },
            onLinkClick : function( el, ev ) {
                ev.preventDefault();
                nextPage( el.data( 'animation' ) );
            }
        } );

        $iterate.on( 'click', function() {
            if( isAnimating ) {
                return false;
            }
            if( animcursor > 67 ) {
                animcursor = 1;
            }
            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 {
                current = 0;
            }
        }
        else{
            if( current < pagesCount - 1 ) {
                ++current;
            }
            else {
                current = 0;
            }
        }

        var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
            outClass = '', inClass = '';

        switch( animation ) {

            case 1:
                outClass = 'pt-page-moveToLeft';
                inClass = 'pt-page-moveFromRight';
                break;
            case 2:
                outClass = 'pt-page-moveToRight';
                inClass = 'pt-page-moveFromLeft';
                break;
        }

        $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,
    };

    })();


   .pt-page-moveToLeft {
    -webkit-animation: moveToLeft .6s ease both;
    animation: moveToLeft .6s ease both;
   }

   .pt-page-moveFromLeft {
    -webkit-animation: moveFromLeft .6s ease both;
    animation: moveFromLeft .6s ease both;
   }

   .pt-page-moveToRight {
    -webkit-animation: moveToRight .6s ease both;
    animation: moveToRight .6s ease both;
   }

   .pt-page-moveFromRight {
    -webkit-animation: moveFromRight .6s ease both;
    animation: moveFromRight .6s ease both;
    }


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

/* Text Styles, Colors, Backgrounds */

.pt-page h1 {
    position: absolute;
    font-weight: 300;
    font-size: 4.4em;
    line-height: 1;
    letter-spacing: 6px;
    margin: 0;
    top: 12%;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    word-spacing: -0.3em;
}

.pt-page h1 span {
    font-family: 'Satisfy', serif;
    font-weight: 400;
    font-size: 40%;
    text-transform: none;
    word-spacing: 0;
    letter-spacing: 0;
    display: block;
    opacity: 0.4;
}

.pt-page h1 strong {
    color: rgba(0,0,0,0.1);
}

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

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

.pt-page-3 {
    background: #60d7a9;
}

.pt-page-4 {
    background: #fdc162;
}

.pt-page-5 {
    background: #fd6a62;
}

.pt-page-6 {
    background: #f68dbb;
}

/* Triggers (menu and button) */

.pt-triggers {
    position: absolute;
    width: 300px;
    z-index: 999999;
    top: 12%;
    left: 50%;
    margin-top: 130px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%); 
    transform: translateX(-50%);
}

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

.pt-triggers .dl-menuwrapper button,
.pt-touch-button {
    border: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 10px 0 20px;
    padding: 0px 20px;
    line-height: 50px;
    height: 50px;
    letter-spacing: 1px;
    width: 100%;
    cursor: pointer;
    display: block;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    box-shadow: 0 3px 0 rgba(0,0,0,0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pt-touch-button {
    background: #fff;
    color: #aaa;
}

.pt-triggers .dl-menuwrapper button {
    margin-bottom: 0;
}

.pt-touch-button:active {
    box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

.touch .pt-triggers .dl-menuwrapper {
    display: none;
}

.pt-message {
    display: none;
    position: absolute;
    z-index: 99999;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #da475c;
    color: #fff;
    text-align: center;
}

.pt-message p {
    margin: 0;
    line-height: 60px;
    font-size: 26px;
}

.no-cssanimations .pt-message {
    display: block;
}

@media screen and (max-width: 47.4375em) {
    .pt-page h1 {
        font-size: 3em;
    }

    .pt-triggers .dl-menuwrapper {
        display: none;
    }
}

@media screen and (max-height: 45.9em) {
    .pt-triggers .dl-menuwrapper li a {
        padding-top: 2px;
        padding-bottom: 2px;
    }
    .pt-triggers .dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after {
        line-height: 24px;
    }
}

@media screen and (max-height: 38em) { 
    .pt-triggers .dl-menuwrapper {
        display: none;
    }
}

我正在尝试制作整页过渡幻灯片。请帮忙！我这是基于CoDrops Typanus页面转换。

我试图一次只显示一个“页面”。点击pt-trigger按钮，我希望有一个转换，通过从右边滑入来转到另一个“页面”。

2 个答案:

答案 0 :(得分：2)

我不确定您是否对AngularJS开放。但是，如果你是，你可以尝试简单的角度动画，只需添加角度和角度动画库。

在http://plnkr.co/edit/SZFQ0waEpIc6v5t5SDJT?p=preview

上试用示例

检查style.css文件。

HTML文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example3-production</title>
  <link href="style.css" rel="stylesheet" type="text/css">


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>



</head>
<body ng-app="ngAnimate">
  <div class="pt-wrapper" ng-init="page=true">
    <div class="pt-trigger-container">
        <button class="pt-trigger" data-animation="1" data-goto="1" ng-click="page=true">Go to page 1</button>
        <button class="pt-trigger" data-animation="2" data-goto="2" ng-click="page=false">Go to page 2</button>
    </div>


    <div class="pt-page pt-page-1 sample-show-hide" ng-show="page" style="clear:both;">
        <h1><strong>Page 1</strong></h1>
    </div>
    <div class="pt-page pt-page-2 sample-show-hide" ng-show="!page" style="clear:both;">
        <h1><strong>Page 2</strong></h1>
    </div>
</div>
</body>
</html>

的style.css：

/* Put your css in here */

.sample-show-hide {
  padding:10px;
  border:1px solid black;
  background:white;
}

.sample-show-hide {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.sample-show-hide.ng-hide {
  opacity:0;
}

答案 1 :(得分：1)

codrops库很棒但是它们的源代码实现很差。

您创建页面过渡所做的只是使用他们的animation.css文件。 提取他们所需的动画类，并通过编写一些jQuery来使用它们。

请参阅此JSFiddle示例。

相关问题
最新问题