add page transition demo

kissyteam · Aug 20, 2013 · 508a29c · 508a29c
1 parent eb411cf
commit 508a29c
Showing 1 changed file with 196 additions and 0 deletions.
diff --git a/src/anim/demo/page-transition/demo.html b/src/anim/demo/page-transition/demo.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<html>
+<head>
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        .pages {
+            position: relative;
+        }
+
+        .page {
+            position: absolute;
+            width: 100%;
+            z-index: 1;
+        }
+
+        #page1 {
+            background: #ffff00;
+        }
+
+        #page2 {
+            background: #ff0000;
+        }
+
+        .page-mask {
+            display: none;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            background: darkgray;
+            opacity: 0.4;
+        }
+    </style>
+</head>
+<body>
+<div class="pages" id="pages">
+    <div class="page" id="page1">
+        <div class="page-mask">
+
+        </div>
+        <div class="page-inner">
+            <button class="go">go</button>
+
+            <button class="back2">back2</button>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>
+
+            <p>1</p>]
+        </div>
+    </div>
+</div>
+<script src="/kissy/build/seed.js"></script>
+<script src="/kissy/src/package.js"></script>
+<script>
+    KISSY.use('node', function (S, Node) {
+        var $ = Node.all;
+        var win = $(window);
+        var winWidth = win.width();
+        var currentPageIndex = 1;
+        win.on('orientationchange resize', function () {
+            winWidth = win.width();
+            for (var i = 1; i < allPages.length; i++) {
+                updateSubPage(i);
+            }
+            updatePagesTranslateX(currentPageIndex)
+        });
+        var pages = $('#pages');
+        var page1 = $('#page1');
+        var allPages = [];
+        var go = $('#go');
+
+        function getSubPageWidth() {
+            return winWidth * 0.8;
+        }
+
+        function getOffsetLeft(i) {
+            return getSubPageWidth() * (1 - i);
+        }
+
+        function updateSubPage(i) {
+            if (i == 1) {
+                allPages[i].css('width', winWidth);
+            } else {
+                allPages[i].css('width', getSubPageWidth());
+                allPages[i].css('left', getSubPageWidth() * (i - 2) + winWidth);
+            }
+        }
+
+        function updatePagesTranslateX(activePage) {
+            pages.css('transform', 'translateX(' + getOffsetLeft(activePage) + 'px)');
+        }
+
+        allPages[1] = page1;
+        updateSubPage(1);
+
+        page1.one('.go').on('click', function () {
+            goto(2, 'page2');
+        });
+        page1.one('.page-mask').on('click', function () {
+            goto(1, 'page1');
+        });
+        function goto(i, id) {
+            S.log('goto: ' + i);
+            var page2 = allPages[i];
+            if (!page2) {
+                allPages[i] = page2 = page1.clone(true);
+                updateSubPage(i);
+                page2.attr('id', id);
+                page2.appendTo(pages);
+
+                page2.one('.page-mask').on('click', function () {
+                    goto(i, 'page' + (i));
+                });
+                page2.one('.go').on('click', function () {
+                    goto(i + 1, 'page' + (i + 1));
+                });
+                if (i - 2 >= 1) {
+                    page2.one('.back2').on('click', function () {
+                        goto(i - 2, 'page' + (i - 2));
+                    });
+                }
+                page2.css('z-index', i + 1);
+            }
+
+            page2.one('.page-mask').hide();
+            currentPageIndex = i;
+            pages.animate({
+                'transform': 'translateX(' + getOffsetLeft(i) + 'px)'
+            }, {
+                duration: 0.5,
+                complete: function () {
+                    for (var j = 1; j < i; j++) {
+                        allPages[j].one('.page-mask').show();
+                    }
+                },
+                useTransition: true
+            });
+        }
+    });
+</script>
+</body>
+</html>