最简单的方法来做一个CSS页面转换

Question

这是我第一次发布，但我试图使这项工作。怎么了？这里是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按钮时，我希望进行一个转换，将其从右侧滑入另一个“页面”。

Answer 1

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

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

Answer 2

的codrops库是真棒，但其实施的源代码是很差。

您只需创建页面转换就可以使用它们的​​文件。 提取他们需要的动画类并通过编写一点jQuery来使用它们。

看到这个JSFiddle的例子。