Inicio Explorar Ayuda
Iniciar sesión
pwa
/
Lungo.js
espejo de https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Archivos Incidencias 0 Wiki
Explorar el Código

New transition 'flow' in <section>

… via class
@soyjavi hace 14 años
padre
e7431df632
commit
fdf82d3af7
Se han modificado 5 ficheros con 79 adiciones y 11 borrados
Unificar vista Mostrar estadísticas de diff
  1. 29 3
      examples/test-pro/index.html
  2. 4 1
      src/Lungo.Constants.js
  3. 7 7
      src/router/Lungo.Router.js
  4. 4 0
      src/stylesheets/css/Lungo.layout.css
  5. 35 0
      src/stylesheets/less/Lungo.layout.less

+ 29 - 3
examples/test-pro/index.html
Ver fichero 

@@ -56,11 +56,37 @@
 
             margin: 2px 0px 0px 2px;
 
             margin: 2px 0px 0px 2px;
 
         }
 
         }
 
     </style>
 
     </style>
 
+
 
+    <style>
 
+        @-webkit-keyframes flow-show {
 
+            0% { -webkit-transform: translateX(100%) scale(.7); }
 
+            50% { -webkit-transform: translateX(0%) scale(.7);}
 
+            100% { -webkit-transform: translateX(0%) scale(1);}
 
+        }
 
+
 
+        @-webkit-keyframes flow-show-revoke {
 
+            0% { -webkit-transform: translateX(0%) scale(1); }
 
+            50% { -webkit-transform: translateX(0%) scale(.7);}
 
+            100% { -webkit-transform: translateX(100%) scale(.7);}
 
+        }
 
+
 
+        @-webkit-keyframes flow-hide {
 
+            0% { -webkit-transform: translateX(0%) scale(1); }
 
+            50% { -webkit-transform: translateX(0%) scale(.7); }
 
+            100% { -webkit-transform: translateX(-100%) scale(.7); }
 
+        }
 
+
 
+        @-webkit-keyframes flow-hide-revoke {
 
+            0% { -webkit-transform: translateX(-100%) scale(.7); }
 
+            50% { -webkit-transform: translateX(0%) scale(.7);}
 
+            100% { -webkit-transform: translateX(0%) scale(1);}
 
+        }
 
+    </style>
 
 </head>
 
 </head>
 
 
 
 <body class="app">
 
 <body class="app">
 
 
 
-    <section id="sec-1" class="pop">
 
+    <section id="sec-1" class="flow">
 
         <header data-title="Test Asides">
 
         <header data-title="Test Asides">
 
             <a href="#asi-1" data-target="aside" class="button blue onleft">asi-1</a>
 
             <a href="#asi-1" data-target="aside" class="button blue onleft">asi-1</a>
 
             <a href="#asi-2" data-target="aside" class="button green onright">sec-2</a>
 
             <a href="#asi-2" data-target="aside" class="button green onright">sec-2</a>
 
@@ -104,7 +130,7 @@
 
         <article id="art-3" class="list indented scrollable"></article>
 
         <article id="art-3" class="list indented scrollable"></article>
 
     </section>
 
     </section>
 
 
 
-    <section id="sec-2" class="pop">
 
+    <section id="sec-2" class="flow">
 
         <header data-back="home"></header>
 
         <header data-back="home"></header>
 
         <article>
 
         <article>
 
         </article>
 
         </article>
 
@@ -115,7 +141,7 @@
 
         <a href="#sec-2" data-target="section">Sec-1</a>
 
         <a href="#sec-2" data-target="section">Sec-1</a>
 
     </aside>
 
     </aside>
 
 
 
-    <section id="test" class="pop">
 
+    <section id="test" class="flow">
 
         <header data-title="Groupbar" class="extended" data-back="home">
 
         <header data-title="Groupbar" class="extended" data-back="home">
 
             <nav class="onright">
 
             <nav class="onright">
 
                 <a href="#" data-article="list-added" class="button red" data-icon="up"></a>
 
                 <a href="#" data-article="list-added" class="button red" data-icon="up"></a>

+ 4 - 1
src/Lungo.Constants.js
Ver fichero 

@@ -24,11 +24,14 @@ LUNGO.Constants = {
 
         ACTIVE: 'active',
 
         ACTIVE: 'active',
 
         ASIDE: 'aside',
 
         ASIDE: 'aside',
 
         SHOW: 'show',
 
         SHOW: 'show',
 
+        SHOW_REVOKE: 'show-revoke',
 
         HIDE: 'hide',
 
         HIDE: 'hide',
 
+        HIDE_REVOKE: 'hide-revoke',
 
         CURRENT: 'current',
 
         CURRENT: 'current',
 
         RIGHT: 'onright',
 
         RIGHT: 'onright',
 
         LEFT: 'onleft',
 
         LEFT: 'onleft',
 
-        HORIZONTAL: 'horizontal'
 
+        HORIZONTAL: 'horizontal',
 
+        FLOW: 'flow'
 
     },
 
     },
 
 
 
     TRIGGER: {
 
     TRIGGER: {

+ 7 - 7
src/router/Lungo.Router.js
Ver fichero 

@@ -24,12 +24,12 @@ LUNGO.Router = (function(lng, undefined) {
 
      */
 
      */
 
     var section = function(section_id) {
 
     var section = function(section_id) {
 
         var section_id = lng.Core.parseUrl(section_id);
 
         var section_id = lng.Core.parseUrl(section_id);
 
+        var current = _getHistoryCurrent();
 
         var target = ELEMENT.SECTION + section_id;
 
         var target = ELEMENT.SECTION + section_id;
 
 
 
         if (_existsTarget(target)) {
 
         if (_existsTarget(target)) {
 
-            lng.dom(_getHistoryCurrent()).removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
 
-
 
-            lng.dom(target).addClass(CLASS.SHOW).trigger(TRIGGER.LOAD);
 
+            lng.dom(current).removeClass(CLASS.HIDE_REVOKE).removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
 
+            lng.dom(target).removeClass(CLASS.SHOW_REVOKE).addClass(CLASS.SHOW).trigger(TRIGGER.LOAD);
 
 
 
             lng.Router.History.add(section_id);
 
             lng.Router.History.add(section_id);
 
         }
 
         }
 
@@ -83,11 +83,11 @@ LUNGO.Router = (function(lng, undefined) {
 
      * @method back
 
      * @method back
 
      */
 
      */
 
     var back = function() {
 
     var back = function() {
 
-        var target = ELEMENT.SECTION + _getHistoryCurrent();
 
-        lng.dom(target).removeClass(CLASS.SHOW).trigger(TRIGGER.UNLOAD);
 
-        lng.Router.History.removeLast();
 
+        var current_section = ELEMENT.SECTION + _getHistoryCurrent();
 
 
 
-        lng.dom(_getHistoryCurrent()).removeClass(CLASS.HIDE).addClass(CLASS.SHOW);
 
+        lng.dom(current_section).removeClass(CLASS.SHOW).addClass(CLASS.SHOW_REVOKE).trigger(TRIGGER.UNLOAD);
 
+        lng.Router.History.removeLast();
 
+        lng.dom(_getHistoryCurrent()).removeClass(CLASS.HIDE).addClass(CLASS.HIDE_REVOKE).addClass(CLASS.SHOW);
 
     };
 
     };
 
 
 
     var _existsTarget = function(target) {
 
     var _existsTarget = function(target) {

+ 4 - 0
src/stylesheets/css/Lungo.layout.css
Ver fichero 

@@ -2,6 +2,10 @@ section{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:1;-web
 
 section.hide{-webkit-transform:translate3d(-100%, 0, 0);-moz-transform:translate3d(-100%, 0, 0);-o-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
 
 section.hide{-webkit-transform:translate3d(-100%, 0, 0);-moz-transform:translate3d(-100%, 0, 0);-o-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
 
 section.pop{-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);opacity:0;-webkit-transition:all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}section.pop:first-child,section.pop.show{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1;}
 
 section.pop{-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);opacity:0;-webkit-transition:all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}section.pop:first-child,section.pop.show{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1;}
 
 section.pop.hide{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);opacity:0;}
 
 section.pop.hide{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);opacity:0;}
 
+section.flow{-webkit-transform:translate3d(100%, 0, 0) scale(0.7);-moz-transform:translate3d(100%, 0, 0) scale(0.7);-o-transform:translate3d(100%, 0, 0) scale(0.7);transform:translate3d(100%, 0, 0) scale(0.7);}section.flow:first-child,section.flow.show{-webkit-animation:flow-show 350ms 500ms cubic-bezier(0.39, 0.575, 0.565, 1) forwards;}
 
+section.flow.show-revoke{-webkit-animation:flow-show-revoke 350ms cubic-bezier(0.39, 0.575, 0.565, 1) forwards;}
 
+section.flow.hide{-webkit-animation:flow-hide 350ms cubic-bezier(0.39, 0.575, 0.565, 1) forwards;}
 
+section.flow.hide-revoke{-webkit-animation:flow-hide-revoke 350ms 500ms cubic-bezier(0.39, 0.575, 0.565, 1) forwards;}
 
 header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:39px;}
 
 header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:39px;}
 
 header{top:0px;}header .onleft{margin-left:4px !important;}
 
 header{top:0px;}header .onleft{margin-left:4px !important;}
 
 header .onright{margin-right:4px !important;}
 
 header .onright{margin-right:4px !important;}

+ 35 - 0
src/stylesheets/less/Lungo.layout.less
Ver fichero 

@@ -44,7 +44,42 @@ section {
 
 			opacity: 0;
 
 			opacity: 0;
 
 		}
 
 		}
 
 	}
 
 	}
 
+	
+	&.flow {
 
+    	.transform(translate3d(100%, 0, 0) scale(0.7));
 
+		
+		&:first-child, &.show {	 -webkit-animation: flow-show 350ms 500ms @defaultTrasition forwards; }
 
+		&.show-revoke { -webkit-animation: flow-show-revoke 350ms @defaultTrasition forwards; }
 
+		
+		&.hide { -webkit-animation: flow-hide 350ms @defaultTrasition forwards; }
 
+		&.hide-revoke { -webkit-animation: flow-hide-revoke 350ms 500ms @defaultTrasition forwards; }
 
+	}
 
+}
 
+/*
 
+@-webkit-keyframes flow-show {
 
+    0% { -webkit-transform: translateX(100%) scale(.7); }
 
+    50% { -webkit-transform: translateX(0%) scale(.7);}
 
+    100% { -webkit-transform: translateX(0%) scale(1);}
 
+}
 
+
 
+@-webkit-keyframes flow-show-revoke {
 
+    0% { -webkit-transform: translateX(0%) scale(1); }
 
+    50% { -webkit-transform: translateX(0%) scale(.7);}
 
+    100% { -webkit-transform: translateX(100%) scale(.7);}
 
+}
 
+
 
+@-webkit-keyframes flow-hide {
 
+    0% { -webkit-transform: translateX(0%) scale(1); }
 
+    50% { -webkit-transform: translateX(0%) scale(.7); }
 
+    100% { -webkit-transform: translateX(-100%) scale(.7); }
 
+}
 
+
 
+@-webkit-keyframes flow-hide-revoke {
 
+    0% { -webkit-transform: translateX(-100%) scale(.7); }
 
+    50% { -webkit-transform: translateX(0%) scale(.7);}
 
+    100% { -webkit-transform: translateX(0%) scale(1);}
 
 }
 
 }
 
+*/
 
 /* @end */
 
 /* @end */
 
 
 
 /* @group <header> & <footer> */
 
 /* @group <header> & <footer> */