Pārlūkot izejas kodu

New default data-transition

Javi Jimenez Villar 13 gadi atpakaļ
vecāks
revīzija
e056b93a03

+ 27 - 12
example/test.html

@@ -19,7 +19,7 @@
 </head>
 
 <body>
-    <section id="main" data-transition="slide" data-aside="features" data-children="folk" data-pull="arrow-down">
+    <section id="main" data-transition="slide" data-aside="features" data-children="folk">
         <header>
             <nav class="left">
                 <a href="#" data-view-aside="features" data-icon="menu"></a>
@@ -57,7 +57,7 @@
                         <small>Founder & CTO</small>
                     </a>
                 </li>
-                <li class="thumb" data-image="http://cdn.tapquo.com/photos/ina.jpg">
+                <li class="thumb" data-view-section="folk2" data-image="http://cdn.tapquo.com/photos/ina.jpg">
                     <strong>Ignacio Olalde</strong>
                     <small>... consectetur adipisicing elit.</small>
                 </li>
@@ -128,6 +128,21 @@
         </article>
     </section>
 
+    <section id='folk2' data-transition="cover" data-aside="features" data-children="x">
+        <header data-title='Javi Jimenez'>
+            <nav>
+                <a href="#" data-view-section="back" data-label="Back" class="button"></a>
+            </nav>
+        </header>
+        <article id='f1' class='active list scroll'>
+            <ul>
+                <li>
+                    <strong>lorem</strong>
+                </li>
+            </ul>
+        </article>
+    </section>
+
     <section id='quojs' data-transition="slide" data-aside="features2">
         <header data-title='QuoJS'>
             <nav>
@@ -199,16 +214,16 @@
         });
 
         Lungo.ready(function() {
-            pull = new Lungo.Element.Pull('section#main article', {
-                onPull: "Pull down to refresh",
-                onRelease: "Release to get new data",
-                onRefresh: "Refreshing...",
-                callback: function() {
-                    setTimeout(function(){
-                        pull.hide();
-                    }, 1000)
-                }
-            });
+            // pull = new Lungo.Element.Pull('section#main article', {
+            //     onPull: "Pull down to refresh",
+            //     onRelease: "Release to get new data",
+            //     onRefresh: "Refreshing...",
+            //     callback: function() {
+            //         setTimeout(function(){
+            //             pull.hide();
+            //         }, 1000)
+            //     }
+            // });
         });
 
     </script>

+ 0 - 1
src/stylesheets/lungo.layout.styl

@@ -24,7 +24,6 @@ body
     display-box()
     box-orient(vertical)
     height: inherit
-    // The "Go Faster" hack
     webkit-transform: translate3d(0,0,0)
 
     & > header, > footer

+ 21 - 21
src/stylesheets/lungo.media.phone.styl

@@ -10,6 +10,9 @@
 
     & > aside
       position: absolute
+      display: none !important
+      &.show
+        display: block !important
 
     & > section
       display: none
@@ -24,46 +27,43 @@
       &.show.hide
         z-index: -1
 
-
       &[data-transition]
         display-box()
-        transition-property opacity, z-index, transform
+        transition-property opacity, z-index, transform,        scale, opacity
         transition-duration TRANSITION_TIME
         transition-timing-function DEFAULT_TRANSITION
         backface-visibility hidden
 
-      /* Transition: POP */
-      &[data-transition="pop"]
-        opacity: 0
-        transform( scale(1.15) )
-        &.show
-          transform( scale(1) )
-          opacity: 1
-        &.hide
-          transform( scale(0.9) )
-          opacity: 0
-
       /* Transition: SLIDE */
       &[data-transition="slide"]
         visibility: visible
-
-        &:first-child
+        &.show, &:first-child
           transform translateX(0%)
         &:not(first-child)
           transform translateX(100%)
-
-        &.show
-          transform translateX(0%)
         &.hide
-          transform translateX(-100%)
+          transform scale(0.9)
+          opacity: 0.75
 
       /* Transition: COVER */
       &[data-transition="cover"]
-        transform translateY(110%)
+        transform translateY(100%)
         &.show, &.hide
           transform translateY(0%)
         &.hide
-          display: block
+          transform scale(0.9)
+          opacity: 0.75
+
+      /* Transition: POP */
+      &[data-transition="pop"]
+        opacity: 0
+        transform scale(1.15)
+        &.show
+          transform scale(1)
+          opacity: 1
+        &.hide
+          transform scale(0.9)
+          opacity: 0
 
       /* Transition: FADE */
       &[data-transition="fade"]