diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index d7b69978a..5f531f7fe 100644 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -203,12 +203,19 @@ $.fn.transition = function() { has: { direction: function(animation) { + var + hasDirection = false + ; animation = animation || settings.animation; - if( animation.search(className.inward) !== -1 || animation.search(className.outward) !== -1) { - module.debug('Direction already set in animation'); - return true; + if(typeof animation === 'string') { + animation = animation.split(' '); + $.each(animation, function(index, word){ + if(word === className.inward || word === className.outward) { + hasDirection = true; + } + }); } - return false; + return hasDirection; }, inlineDisplay: function() { var @@ -865,7 +872,7 @@ $.fn.transition.settings = { name : 'Transition', // debug content outputted to console - debug : false, + debug : true, // verbose debug output verbose : true, diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index 90c67f46e..b23a48375 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -1,130 +1,3 @@ -/******************************* - Static Animations -*******************************/ - -/*-------------- - Emphasis ----------------*/ - -.flash.transition { - animation-name: flash; -} -.shake.transition { - animation-name: shake; -} -.bounce.transition { - animation-name: bounce; -} -.tada.transition { - animation-name: tada; -} -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -.pulse.transition { - animation-name: pulse; -} -.jiggle.transition { - animation-name: jiggle; -} - -/* Flash */ -@keyframes flash { - 0%, 50%, 100% { - opacity: 1; - } - 25%, 75% { - opacity: 0; - } -} - -/* Shake */ -@keyframes shake { - 0%, 100% { - transform: translateX(0); - } - 10%, 30%, 50%, 70%, 90% { - transform: translateX(-10px); - } - 20%, 40%, 60%, 80% { - transform: translateX(10px); - } -} - -/* Bounce */ -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateY(0); - } - 40% { - transform: translateY(-30px); - } - 60% { - transform: translateY(-15px); - } -} - -/* Tada */ -@keyframes tada { - 0% { - transform: scale(1); - } - 10%, 20% { - transform: scale(0.9) rotate(-3deg); - } - 30%, 50%, 70%, 90% { - transform: scale(1.1) rotate(3deg); - } - 40%, 60%, 80% { - transform: scale(1.1) rotate(-3deg); - } - 100% { - transform: scale(1) rotate(0); - } -} - -/* Pulse */ -@keyframes pulse { - 0% { - transform: scale(1); - opacity: 1; - } - 50% { - transform: scale(0.9); - opacity: 0.7; - } - 100% { - transform: scale(1); - opacity: 1; - } - -} - -/* Rubberband */ -@keyframes jiggle { - 0% { - transform: scale3d(1, 1, 1); - } - 30% { - transform: scale3d(1.25, 0.75, 1); - } - 40% { - transform: scale3d(0.75, 1.25, 1); - } - 50% { - transform: scale3d(1.15, 0.85, 1); - } - 65% { - transform: scale3d(.95, 1.05, 1); - } - 75% { - transform: scale3d(1.05, .95, 1); - } - 100% { - transform: scale3d(1, 1, 1); - } -} - - - /******************************* Transitions *******************************/ @@ -135,16 +8,13 @@ .browse.transition.in { animation-name: browseIn; - animation-timing-function: ease; } .browse.transition.out, .browse.transition.out.left { animation-name: browseOutLeft; - animation-timing-function: ease; } .browse.transition.out.right { animation-name: browseOutRight; - animation-timing-function: ease; } @keyframes browseIn { @@ -211,6 +81,7 @@ .drop.transition { transform-origin: top center; + transition-duration: 0.8s; animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); } .drop.transition.in { @@ -362,7 +233,7 @@ } 100% { opacity: 0; - transform: translateX(-10%); + transform: translateX(10%); } } @keyframes fadeOutRight { @@ -372,7 +243,7 @@ } 100% { opacity: 0; - transform: translateX(10%); + transform: translateX(-10%); } } @@ -481,7 +352,6 @@ .transition.fly.in { animation-name: flyIn; - animation-timing-function: ease; } .transition.fly.in.up { animation-name: flyInUp; @@ -497,7 +367,6 @@ } .transition.fly.out { animation-name: flyOut; - animation-timing-function: ease; } .transition.fly.out.up { animation-name: flyOutUp; @@ -642,28 +511,28 @@ } @keyframes flyOutUp { 20% { - transform: translate3d(0, -10px, 0); + transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; - transform: translate3d(0, 20px, 0); + transform: translate3d(0, -20px, 0); } 100% { opacity: 0; - transform: translate3d(0, -2000px, 0); + transform: translate3d(0, 2000px, 0); } } @keyframes flyOutDown { 20% { - transform: translate3d(0, 10px, 0); + transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; - transform: translate3d(0, -20px, 0); + transform: translate3d(0, 20px, 0); } 100% { opacity: 0; - transform: translate3d(0, 2000px, 0); + transform: translate3d(0, -2000px, 0); } } @keyframes flyOutRight { @@ -775,44 +644,44 @@ .transition.swing, .transition.swing.in, -.transition.swing.in.down{ +.transition.swing.in.down { transform-origin: top center; transition-timing-function: ease-in; animation-name: swingInX; } -.transition.swing.in.up{ +.transition.swing.in.up { transform-origin:bottom center; transition-timing-function: ease-in; animation-name: swingInX; } -.transition.swing.in.left{ +.transition.swing.in.left { transform-origin: center right; transition-timing-function: ease-in; animation-name: swingInY; } -.transition.swing.in.right{ +.transition.swing.in.right { transform-origin: center left; transition-timing-function: ease-in; animation-name: swingInY; } .transition.swing.out.down, -.transition.swing.out{ +.transition.swing.out { transform-origin: top center; transition-timing-function: ease-in; animation-name: swingOutX; } -.transition.swing.out.up{ +.transition.swing.out.up { transform-origin:bottom center; transition-timing-function: ease-in; animation-name: swingOutX; } -.transition.swing.out.left{ +.transition.swing.out.left { transform-origin: center right; transition-timing-function: ease-in; animation-name: swingOutY; } -.transition.swing.out.right{ +.transition.swing.out.right { transform-origin: center left; transition-timing-function: ease-in; animation-name: swingOutY; @@ -883,6 +752,130 @@ } } +/******************************* + Static Animations +*******************************/ + +/*-------------- + Emphasis +---------------*/ + +.flash.transition { + animation-name: flash; +} +.shake.transition { + animation-name: shake; +} +.bounce.transition { + animation-name: bounce; +} +.tada.transition { + animation-name: tada; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +.pulse.transition { + animation-name: pulse; +} +.jiggle.transition { + animation-name: jiggle; +} + +/* Flash */ +@keyframes flash { + 0%, 50%, 100% { + opacity: 1; + } + 25%, 75% { + opacity: 0; + } +} + +/* Shake */ +@keyframes shake { + 0%, 100% { + transform: translateX(0); + } + 10%, 30%, 50%, 70%, 90% { + transform: translateX(-10px); + } + 20%, 40%, 60%, 80% { + transform: translateX(10px); + } +} + +/* Bounce */ +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-30px); + } + 60% { + transform: translateY(-15px); + } +} + +/* Tada */ +@keyframes tada { + 0% { + transform: scale(1); + } + 10%, 20% { + transform: scale(0.9) rotate(-3deg); + } + 30%, 50%, 70%, 90% { + transform: scale(1.1) rotate(3deg); + } + 40%, 60%, 80% { + transform: scale(1.1) rotate(-3deg); + } + 100% { + transform: scale(1) rotate(0); + } +} + +/* Pulse */ +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(0.9); + opacity: 0.7; + } + 100% { + transform: scale(1); + opacity: 1; + } + +} + +/* Rubberband */ +@keyframes jiggle { + 0% { + transform: scale3d(1, 1, 1); + } + 30% { + transform: scale3d(1.25, 0.75, 1); + } + 40% { + transform: scale3d(0.75, 1.25, 1); + } + 50% { + transform: scale3d(1.15, 0.85, 1); + } + 65% { + transform: scale3d(.95, 1.05, 1); + } + 75% { + transform: scale3d(1.05, .95, 1); + } + 100% { + transform: scale3d(1, 1, 1); + } +} diff --git a/src/themes/default/modules/transition.variables b/src/themes/default/modules/transition.variables index 366b35eac..d8b7d3709 100644 --- a/src/themes/default/modules/transition.variables +++ b/src/themes/default/modules/transition.variables @@ -4,7 +4,7 @@ @transitionDefaultEasing: @defaultEasing; @transitionDefaultFill: both; -@transitionDefaultDuration: 500ms; +@transitionDefaultDuration: 300ms; @use3DAcceleration: translateZ(0); @backfaceVisibility: hidden; \ No newline at end of file