Startseite Erkunden Hilfe
Anmelden
pwa
/
Lungo.js
Mirror von https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

First tests with animation keyframes

piniphone vor 13 Jahren
Ursprung
b8710069de
Commit
798e06261d
6 geänderte Dateien mit 181 neuen und 76 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 3 1
      GruntFile.coffee
  2. 13 8
      example/navigation.html
  3. 25 7
      src/modules/Lungo.Router.coffee
  4. 60 0
      src/stylesheets/lungo.animation.slide.styl
  5. 20 0
      src/stylesheets/lungo.animation.styl
  6. 60 60
      src/stylesheets/lungo.media.phone.styl

+ 3 - 1
GruntFile.coffee
Datei anzeigen 

@@ -44,7 +44,9 @@ module.exports = (grunt) ->
 
         'src/stylesheets/lungo.layout.*.styl',
 
         'src/stylesheets/lungo.widget.styl',
 
         'src/stylesheets/lungo.widget.*.styl',
 
-        'src/stylesheets/lungo.media.*.styl']
 
+        'src/stylesheets/lungo.media.*.styl',
 
+        'src/stylesheets/lungo.animation.styl',
 
+        'src/stylesheets/lungo.animation.*.styl']
 
       theme: [
 
         'src/stylesheets/theme/theme.*.styl']
 
       theme_firefoxos: [

+ 13 - 8
example/navigation.html
Datei anzeigen 

@@ -19,6 +19,8 @@
 
 </head>
 
 
 <body>
 
+
 
+    <!--
 
     <aside id="a">
 
         <header data-title="aside a"></header>
 
         <article></article>
 
@@ -28,12 +30,14 @@
 
         <header data-title="aside b"></header>
 
         <article></article>
 
     </aside>
 
+    -->
 
 
-    <section id="zero" data-transition data-children="one" data-aside="a">
 
+    <!-- <section id="zero" data-transition="slide" data-children="one" data-aside="a"> -->
 
+    <section id="zero" data-transition="slide" data-children="one">
 
         <header data-title="Zero">
 
-            <nav class="left">
 
+            <!-- <nav class="left">
 
                 <button data-icon="list" data-view-aside="a"></button>
 
-            </nav>
 
+            </nav> -->
 
             <nav class="right">
 
                 <button data-icon="arrow-right" data-view-section="one"></button>
 
             </nav>
 
@@ -41,18 +45,18 @@
 
         <article id="zero-1"></article>
 
     </section>
 
 
-    <section id="one" data-transition="slide" data-children="two" data-aside="b">
 
+    <!-- <section id="one" data-transition="slide" data-children="two" data-aside="b"> -->
 
+    <section id="one" data-transition="slide" data-children="two">
 
         <header data-title="One" data-back="home">
 
-            <nav class="left">
 
+            <!-- <nav class="left">
 
                 <button data-icon="list" data-view-aside="b"></button>
 
-            </nav>
 
+            </nav> -->
 
             <nav class="right">
 
                 <button data-icon="arrow-right" data-view-section="two"></button>
 
             </nav>
 
         </header>
 
         <article id="one-1"></article>
 
     </section>
 
-
 
     <section id="two" data-transition="slide" data-children="three">
 
         <header data-back="home" data-title="Two">
 
             <nav class="right">
 
@@ -71,11 +75,12 @@
 
         <article id="three-1"></article>
 
     </section>
 
 
+<!--
 
     <section id="four" data-transition="cover">
 
         <header data-back="home" data-title="Four"></header>
 
         <article id="four-1"></article>
 
     </section>
 
-
 
+ -->
 
     <!-- Lungo dependencies -->
 
     <script src="components/quojs/quo.js"></script>
 
     <script src="components/lungo.brownie/lungo.debug.js"></script>

+ 25 - 7
src/modules/Lungo.Router.coffee
Datei anzeigen 

@@ -9,9 +9,11 @@ Handles the <sections> and <articles> to show
 
 ###
 
 
 Lungo.Router = do(lng = Lungo) ->
 
-  C        = lng.Constants
 
-  HASHTAG  = "#"
 
-  _history = []
 
+
 
+  C                   = lng.Constants
 
+  HASHTAG             = "#"
 
+  ANIMATIONEND_EVENTS = ["animationend", "webkitAnimationEnd", "oanimationend", "MSAnimationEnd"]
 
+  _history            = []
 
 
 
   ###
 
@@ -20,18 +22,24 @@ Lungo.Router = do(lng = Lungo) ->
 
   @param    {string} Id of the <section>
 
   ###
 
   section = (section_id) ->
 
+    console.error "router section #{section_id}"
 
     current = lng.Element.Cache.section
 
     if _notCurrentTarget(current, section_id)
 
       query = C.ELEMENT.SECTION + HASHTAG + section_id
 
       target = if current then current.siblings(query) else lng.dom(query)
 
       if target.length > 0
 
         if lng.DEVICE is C.DEVICE.PHONE and current?
 
-          current.siblings("#{C.ELEMENT.SECTION}.#{C.CLASS.LAST}").removeClass C.CLASS.LAST
 
-          lng.Section.defineTransition target, current
 
-          current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDE).addClass(C.CLASS.LAST)
 
+
 
+          console.error current, target
 
+          current.addClass "moveToBack"
 
+          target.addClass "moveFromRight"
 
+          do _bindEnd
 
+          # current.siblings("#{C.ELEMENT.SECTION}.#{C.CLASS.LAST}").removeClass C.CLASS.LAST
 
+          # lng.Section.defineTransition target, current
 
+          # current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDE).addClass(C.CLASS.LAST)
 
 
         lng.Section.show current, target
 
-        lng.Router.step section_id
 
+        # lng.Router.step section_id
 
         do _url unless Lungo.Config.history is false
 
         do _updateNavigationElements
 
 
@@ -115,6 +123,16 @@ Lungo.Router = do(lng = Lungo) ->
 
 
   _removeLast = -> _history.length -= 1
 
 
+  _bindEnd = ->
 
+    document.addEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS
 
+
 
+  _unbindEnd = ->
 
+    document.removeEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS
 
+
 
+  _transitionEnd = ->
 
+    console.error 'Transition END!'
 
+    do _unbindEnd
 
+
 
 
   section : section
 
   back    : back

+ 60 - 0
src/stylesheets/lungo.animation.slide.styl
Datei anzeigen 

@@ -0,0 +1,60 @@
 
+TIME = 0.4s
 
+
 
+.moveToLeft
 
+  vendor(animation, moveToLeft TIME ease both)
 
+.moveFromLeft
 
+  vendor(animation, moveFromLeft TIME ease both)
 
+.moveToRight
 
+  vendor(animation, moveToRight TIME ease both)
 
+.moveFromRight
 
+  vendor(animation, moveFromRight TIME ease both)
 
+.moveToBack
 
+  vendor(animation, moveToBack TIME ease both)
 
+
 
+@-webkit-keyframes moveToLeft
 
+  100% { -webkit-transform: translateX(-100%); }
 
+@-moz-keyframes moveToLeft
 
+  100% { -moz-transform: translateX(-100%); }
 
+@keyframes moveToLeft
 
+  100% { transform: translateX(-100%); }
 
+
 
+@-webkit-keyframes moveFromLeft
 
+  0% { -webkit-transform: translateX(-100%); }
 
+@-moz-keyframes moveFromLeft
 
+  0% { -moz-transform: translateX(-100%); }
 
+@keyframes moveFromLeft
 
+  0% { transform: translateX(-100%); }
 
+
 
+@-webkit-keyframes moveToRight
 
+  100% { -webkit-transform: translateX(100%); }
 
+@-moz-keyframes moveToRight
 
+  100% { -moz-transform: translateX(100%); }
 
+@keyframes moveToRight
 
+  100% { transform: translateX(100%); }
 
+
 
+@-webkit-keyframes moveFromRight
 
+  0%   { -webkit-transform: translateX(100%); }
 
+@-moz-keyframes moveFromRight
 
+  0%   { -moz-transform: translateX(100%); }
 
+@keyframes moveFromRight
 
+  0%   { transform: translateX(100%); }
 
+
 
+
 
+
 
+@-webkit-keyframes moveToBack
 
+  100% {
 
+    -webkit-transform: rotateX(20deg) translateZ(-100px);
 
+    transform-origin: 100% 50%;
 
+    opacity: .3;
 
+  }
 
+@-moz-keyframes moveToLeft
 
+  100% {
 
+    -moz-transform: rotateX(20deg) translateZ(-100px);
 
+    opacity: .3;
 
+  }
 
+@keyframes moveToLeft
 
+  100% {
 
+    transform: rotateX(20deg) translateZ(-100px);
 
+    opacity: .3;
 
+  }
 
+

+ 20 - 0
src/stylesheets/lungo.animation.styl
Datei anzeigen 

@@ -0,0 +1,20 @@
 
+@import "__init.styl"
 
+
 
+body
 
+  vendor(perspective, 800px)
 
+  vendor(transform-style, preserve-3d)
 
+
 
+  & > section
 
+    display-box()
 
+    width: 100%
 
+    height: 100%
 
+    position: absolute
 
+    top: 0
 
+    left: 0
 
+    visibility: hidden
 
+    overflow: hidden
 
+    transform translate3d(0, 0, 0)
 
+    vendor(backface-visibility, hidden)
 
+
 
+    &.show
 
+      visibility: visible

+ 60 - 60
src/stylesheets/lungo.media.phone.styl
Datei anzeigen 

@@ -15,68 +15,68 @@
 
       &:not([data-transition]).show
 
         display: block
 
 
-      &.show.aside
 
-        &:not(.right)
 
-          transform translateX(ASIDE_WIDTH)
 
-        &.right
 
-          transform translateX(-(ASIDE_WIDTH))
 
-      &.show.hide
 
-        z-index: -1
 
+      // &.show.aside
 
+      //   &:not(.right)
 
+      //     transform translateX(ASIDE_WIDTH)
 
+      //   &.right
 
+      //     transform translateX(-(ASIDE_WIDTH))
 
+      // &.show.hide
 
+      //   z-index: -1
 
 
-      &[data-transition]
 
-        display-box()
 
-        transition-property opacity, z-index, transform,        scale, opacity
 
-        transition-duration TRANSITION_TIME
 
-        transition-timing-function DEFAULT_TRANSITION
 
-        backface-visibility hidden
 
+      // &[data-transition]
 
+      //   display-box()
 
+      //   transition-property opacity, z-index, transform,        scale, opacity
 
+      //   transition-duration TRANSITION_TIME
 
+      //   transition-timing-function DEFAULT_TRANSITION
 
+      //   backface-visibility hidden
 
 
-      /* Transition: SLIDE */
 
-      &[data-transition="slide"]
 
-        visibility: visible
 
-        z-index: 2
 
-        &.show, &:first-child
 
-          transform translateX(0%)
 
-          z-index: 1
 
-        &:not(first-child)
 
-          transform translateX(100%)
 
-        &.hide
 
-          transform scale(0.9)
 
-          z-index: -1
 
-          &:not(.last)
 
-            opacity: 0
 
-            transition none !important
 
-          &.last
 
-            opacity: 0.5 !important
 
+      // // Transition: SLIDE
 
+      // &[data-transition="slide"]
 
+      //   visibility: visible
 
+      //   z-index: 2
 
+      //   &.show, &:first-child
 
+      //     transform translateX(0%)
 
+      //     z-index: 1
 
+      //   &:not(first-child)
 
+      //     transform translateX(100%)
 
+      //   &.hide
 
+      //     transform scale(0.9)
 
+      //     z-index: -1
 
+      //     &:not(.last)
 
+      //       opacity: 0
 
+      //       transition none !important
 
+      //     &.last
 
+      //       opacity: 0.5 !important
 
 
-      /* Transition: COVER */
 
-      &[data-transition="cover"]
 
-        transform translateY(100%)
 
-        &.show, &.hide
 
-          transform translateY(0%)
 
-        &.hide
 
-          transform scale(0.9)
 
-          z-index: -1
 
-          &:not(.last)
 
-            opacity: 0
 
-            visibility: hidden
 
-          &.last
 
-            opacity: 0.2
 
+      // // Transition: COVER
 
+      // &[data-transition="cover"]
 
+      //   transform translateY(100%)
 
+      //   &.show, &.hide
 
+      //     transform translateY(0%)
 
+      //   &.hide
 
+      //     transform scale(0.9)
 
+      //     z-index: -1
 
+      //     &:not(.last)
 
+      //       opacity: 0
 
+      //       visibility: hidden
 
+      //     &.last
 
+      //       opacity: 0.2
 
 
-      /* 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: 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"]
 
-        opacity: 0
 
-        &:first-child, &.show
 
-          opacity: 1
 
-        &:hide
 
-          opacity: 0
 
+      // // Transition: FADE
 
+      // &[data-transition="fade"]
 
+      //   opacity: 0
 
+      //   &:first-child, &.show
 
+      //     opacity: 1
 
+      //   &:hide
 
+      //     opacity: 0