Page Transition

by HYEONGJINKIM

HTML

<link rel="stylesheet" href="http://dan-silver.github.io/ElementTransitions.js/build/elementTransitions.css">
<script src="http://dan-silver.github.io/ElementTransitions.js/src/js/elementTransitions.js"></script>
<!--<div id="page1" data-role="page" class="et-page et-page-current">-->
<div id="page1" data-role="page">
    <div data-role="header">
         <h1>Page 1</h1>

    </div>
    <div data-role="content">
        <p>Go to <a href="#page2" data-transition="scaleUp">page 2</a>.</p>
        <div class="et-wrapper et-rotate" et-in="rotateCarouselBottomIn" et-out="rotateCarouselBottomOut ontop">
            <div class="et-page" style="background: #0ac2d2;">
                 <h2>Page 1</h2>

            </div>
            <div class="et-page" style="background: #f68dbb;">
                 <h2>Page 2</h2>

            </div>
            <div class="et-page" style="background: #60d7a9;">
                 <h2>Page 3</h2>

            </div>
            <div class="et-page" style="background: #fdc162;">
                 <h2>Page 4</h2>

            </div>
            <div class="et-page" style="background: #fd6a62;">
                 <h2>Page 5</h2>

            </div>
        </div>
    </div>
</div>
<!-- <div id="page2" data-role="page" class="et-page"> -->
<div id="page2" data-role="page">
    <div data-role="header">
         <h1>Page 2</h1>

    </div>
    <div data-role="content">
        <p>Go back to <a href="#page1" data-rel="back">page 1</a>.</p>
    </div>
</div>

CSS

body {
    font-family:'Lato', Calibri, Arial, sans-serif;
    padding: 50px;
}
button.et-rotate {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 999;
}
.et-wrapper {
    width: 200px;
    height: 170px;
    float: left;
    margin: 15px;
}
.et-page {
    padding: 8px;
}

JavaScript

/*
  elementTransitions.js
*/
var PageTransitions = (function ($) {
    var startElement = 0,
        welPage = $('.et-page'),
        animEndEventNames = {
            'WebkitAnimation': 'webkitAnimationEnd',
                'OAnimation': 'oAnimationEnd',
                'msAnimation': 'MSAnimationEnd',
                'animation': 'animationend'
        }

        function getTransitionPrefix() {
            var b = document.body || document.documentElement;
            var s = b.style;
            var p = 'animation';
            if (typeof s[p] == 'string') return 'animation';

            // Tests for vendor specific prop
            v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
            p = p.charAt(0).toUpperCase() + p.substr(1);
            for (var i = 0; i < v.length; i++) {
                if (typeof s[v[i] + p] == 'string') return v[i] + p;
            }
            return false;
        }
        // animation end event name
        animEndEventName = animEndEventNames[getTransitionPrefix()];
    console.log(animEndEventName);

    function init() {
        $(".et-page").each(function () {
            $(this).data('originalClassList', $(this).attr('class'));
        });
        $(".et-wrapper").each(function () {
            $(this).data('current', 0);
            $(this).data('isAnimating', false);
            $(this).children(".et-page").eq(startElement).addClass('et-page-current');
        });

        $(".et-rotate").click(function () {
            console.log('animate');
            animate($(this));
        });
    }

    function animate(block, callback) {
        nextPage($(block).closest('.et-wrapper'), $(block).attr('et-out'), $(block).attr('et-in'), callback);
    }

    function nextPage(block, outClass, inClass, callback) {
        console.log("nextPage");
        console.log("block");
        console.log(block);
        console.log("outClass");
        console.log(outClass);
        console.log("inClass");
        console.log(inClass);
 ...