diff --git a/example/navigation.html b/example/navigation.html index 12a9fb8e..2eb9deab 100644 --- a/example/navigation.html +++ b/example/navigation.html @@ -20,42 +20,28 @@ - - -
-
-
+
+

START

+

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero zero

END

+
-
-
-
+
+

START

+

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

one one one one one one one one one one one one one one one one

END

+
@@ -63,7 +49,34 @@
-
+
+ +
@@ -72,15 +85,14 @@ -
+
Naena
- + diff --git a/src/modules/Lungo.Router.coffee b/src/modules/Lungo.Router.coffee index cf54afe8..c96ea115 100644 --- a/src/modules/Lungo.Router.coffee +++ b/src/modules/Lungo.Router.coffee @@ -8,13 +8,15 @@ Handles the and to show @author Guillermo Pascual || @pasku1 ### -Lungo.Router = do(lng = Lungo) -> +Lungo.Router = do (lng = Lungo) -> C = lng.Constants HASHTAG = "#" ANIMATIONEND_EVENTS = ["animationend", "webkitAnimationEnd", "oanimationend", "MSAnimationEnd"] _history = [] - + _outPage = undefined + _inPage = undefined + _animating = false ### Navigate to a
. @@ -22,24 +24,20 @@ Lungo.Router = do(lng = Lungo) -> @param {string} Id of the
### section = (section_id) -> - console.error "router section #{section_id}" - current = lng.Element.Cache.section - if _notCurrentTarget(current, section_id) + _outPage = lng.Element.Cache.section + if _notCurrentTarget(_outPage, 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? - - 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 + _inPage = if _outPage then _outPage.siblings(query) else lng.dom(query) + if _inPage.length > 0 + if lng.DEVICE is C.DEVICE.PHONE and _outPage? + outClass = _inPage.data(C.ATTRIBUTE.TRANSITION) + "Out" + inClass = _inPage.data(C.ATTRIBUTE.TRANSITION) + "In" + _outPage.addClass(outClass).addClass("show") + _inPage.addClass(inClass).addClass("show") + do _bindAnimationEnd + + lng.Section.show _outPage, _inPage + lng.Router.step section_id do _url unless Lungo.Config.history is false do _updateNavigationElements @@ -49,20 +47,20 @@ Lungo.Router = do(lng = Lungo) -> @method back ### back = -> - _removeLast() - current = lng.Element.Cache.section + do _removeLast + _outPage = lng.Element.Cache.section query = C.ELEMENT.SECTION + HASHTAG + history() - target = current.siblings(query) + _inPage = _outPage.siblings(query) if lng.DEVICE is C.DEVICE.PHONE - lng.Aside.hide() - lng.Section.assignTransition target, target.data C.TRANSITION.ORIGIN - current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDING) - setTimeout (-> - current.removeClass(C.CLASS.HIDING) - ), C.TRANSITION.DURATION - if target.hasClass("aside") then lng.Aside.toggle() - - lng.Section.show current, target + do lng.Aside.hide + outClass = _outPage.data(C.ATTRIBUTE.TRANSITION) + "OutBack" + inClass = _outPage.data(C.ATTRIBUTE.TRANSITION) + "InBack" + _outPage.addClass(outClass).addClass("show") + _inPage.addClass(inClass).addClass("show") + do _bindAnimationEnd + if _inPage.hasClass("aside") then lng.Aside.toggle() + + lng.Section.show _outPage, _inPage do _url unless Lungo.Config.history is false do _updateNavigationElements @@ -123,15 +121,20 @@ Lungo.Router = do(lng = Lungo) -> _removeLast = -> _history.length -= 1 - _bindEnd = -> + _bindAnimationEnd = -> document.addEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS + _animating = true - _unbindEnd = -> + _unbindAnimationEnd = -> document.removeEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS _transitionEnd = -> - console.error 'Transition END!' - do _unbindEnd + _outPage.attr "class", "" + _inPage.attr "class", "show" + _outPage = undefined + _inPage = undefined + do _unbindAnimationEnd + _animating = false section : section diff --git a/src/stylesheets/__init.styl b/src/stylesheets/__init.styl index 8cda7233..c43284f7 100644 --- a/src/stylesheets/__init.styl +++ b/src/stylesheets/__init.styl @@ -9,7 +9,7 @@ ASIDE_SMALL_ICON = 48px DEFAULT_TRANSITION = easeOutSine DEFAULT_TRANSITION = easeInCubic -TRANSITION_TIME = 400ms +TRANSITION_TIME = 1000ms FONT_SIZE_TINY = 11px FONT_SIZE_SMALL = 0.9em diff --git a/src/stylesheets/lungo.animation.back.styl b/src/stylesheets/lungo.animation.back.styl new file mode 100644 index 00000000..164fa788 --- /dev/null +++ b/src/stylesheets/lungo.animation.back.styl @@ -0,0 +1,24 @@ +@import "__init.styl" + +OPACITY = 0.3 +TRANSLATE_Z = -300px +ROTATE_X = 20deg +ORIGIN = 100% 50% + +.backIn + vendor(animation, backIn TRANSITION_TIME ease both) +.backOut + vendor(animation, backOut TRANSITION_TIME ease both) + + +@keyframes backIn + from { + transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) + transform-origin: ORIGIN + } + +@keyframes backOut + to { + transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) + transform-origin: ORIGIN + } diff --git a/src/stylesheets/lungo.animation.cover.styl b/src/stylesheets/lungo.animation.cover.styl new file mode 100644 index 00000000..8baaeb54 --- /dev/null +++ b/src/stylesheets/lungo.animation.cover.styl @@ -0,0 +1,36 @@ +@import "__init.styl" + +TRANSLATE_Y = -18% +TRANSLATE_Z = -150px +ROTATE_X = 20deg + +.coverIn + vendor(animation, coverIn TRANSITION_TIME ease both) +.coverOut + vendor(animation, coverOut TRANSITION_TIME ease both) +.coverInBack + vendor(animation, coverInBack TRANSITION_TIME ease both) +.coverOutBack + vendor(animation, coverOutBack TRANSITION_TIME ease both) + + +@keyframes coverIn + from { + transform: translateY(100%); + } + +@keyframes coverOut + to { + transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) translateY(TRANSLATE_Y) + } + +@keyframes coverInBack + from { + transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) translateY(TRANSLATE_Y) + } + +@keyframes coverOutBack + to { + transform: translateY(100%) + } + diff --git a/src/stylesheets/lungo.animation.slide.styl b/src/stylesheets/lungo.animation.slide.styl index e9fcb746..815a51bd 100644 --- a/src/stylesheets/lungo.animation.slide.styl +++ b/src/stylesheets/lungo.animation.slide.styl @@ -1,60 +1,23 @@ -TIME = 0.4s +@import "__init.styl" -.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%); } +.slideIn + vendor(animation, slideIn TRANSITION_TIME ease both) +.slideOut + vendor(animation, backOut TRANSITION_TIME ease both) +.slideInBack + vendor(animation, backIn TRANSITION_TIME ease both) +.slideOutBack + vendor(animation, slideOutBack TRANSITION_TIME ease both) -@-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 slideIn + from { + transform: translateX(100%) } -@keyframes moveToLeft - 100% { - transform: rotateX(20deg) translateZ(-100px); - opacity: .3; + +@keyframes slideOutBack + to { + transform: translateX(100%) }