From 28c81f5801f85e416740ef8d911a3b3d9d7036ef Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Feb 2015 13:45:48 -0500 Subject: [PATCH] Bug fixes for transition --- RELEASE-NOTES.md | 3 + src/definitions/modules/transition.js | 1 + .../default/modules/transition.overrides | 100 +++++++++--------- 3 files changed, 54 insertions(+), 50 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 4c6018cba..8308623b6 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -7,12 +7,15 @@ - **Visibiliity** - Attach callbacks to elements visibility conditions like `top visible` `bottom visible`, `passing`. Useful for things like: image lazy loading, infinite scroll content, and recording tracking metrics **Enhancements** +- **Transition** - Added more reasonable default durations for each animation - **Loader** - `inline loader` now has a `centered` variation - **Transition** - Added `toggle` behavior and docs for `show` and `hide` - **Transition** - transition now has `stop`, `stop all`, and `clear queue` for removing transitions, (undocumented method `stop`, and `start` renamed to `enable` and `disable`) **Bugs** +- **Transition** - Fixes `swing out` animations not working correctly - **Transition** - Fixed display state other than `block` not determined when using `show` and `hide` without an animation +- **Transition** - Fix bug in `remove looping` causing one additional animation - **Menu** - Fix vertical pointing menu, sub menu arrow color - **Item ** - `img` inside of `ui item content` now do not receive size formatting by default - **Form** - Added `input[type="search"]` styles to `ui form` diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 41188f24d..254411409 100644 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -465,6 +465,7 @@ $.fn.transition = function() { $module .removeClass(className.looping) ; + module.reset(); module.forceRepaint(); }, transition: function() { diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index ac4856b6d..a8b9d61af 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -14,6 +14,9 @@ Browse ---------------*/ +.transition.browse { + animation-duration: 500ms; +} .transition.browse.in { animation-name: browseIn; } @@ -92,7 +95,7 @@ .drop.transition { transform-origin: top center; - animation-duration: 0.5s; + animation-duration: 500ms; animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); } .drop.transition.in { @@ -266,6 +269,7 @@ .flip.transition.in, .flip.transition.out { + animation-duration: 750ms; perspective: 2000px; } .horizontal.flip.transition.in { @@ -653,39 +657,42 @@ Swing ---------------*/ -.transition.swing.in, +.transition.swing { + animation-duration: 800ms; +} + .transition[class*="swing down"].in { - animation-name: swingInY; + animation-name: swingInX; transform-origin: top center; } .transition[class*="swing up"].in { - animation-name: swingInY; + animation-name: swingInX; transform-origin: bottom center; } .transition[class*="swing left"].in { - animation-name: swingInX; + animation-name: swingInY; transform-origin: center right; } .transition[class*="swing right"].in { - animation-name: swingInX; + animation-name: swingInY; transform-origin: center left; } .transition.swing.out, .transition[class*="swing down"].out { - animation-name: swingOutY; + animation-name: swingOutX; transform-origin: top center; } .transition[class*="swing up"].out { - animation-name: swingOutY; + animation-name: swingOutX; transform-origin: bottom center; } .transition[class*="swing left"].out { - animation-name: swingOutX; + animation-name: swingOutY; transform-origin: center right; } .transition[class*="swing right"].out { - animation-name: swingOutX; + animation-name: swingOutY; transform-origin: center left; } @@ -696,14 +703,14 @@ opacity: 0; } 40% { - transform: perspective(1000px) rotateX(-20deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; } 60% { - transform: perspective(1000px) rotateX(10deg); + transform: perspective(1000px) rotateX(15deg); } 80% { - transform: perspective(1000px) rotateX(-5deg); - opacity: 1; + transform: perspective(1000px) rotateX(-7.5deg); } 100% { transform: perspective(1000px) rotateX(0deg); @@ -715,14 +722,14 @@ opacity: 0; } 40% { - transform: perspective(1000px) rotateY(20deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; } 60% { - transform: perspective(1000px) rotateY(-10deg); + transform: perspective(1000px) rotateY(-17.5deg); } 80% { - transform: perspective(1000px) rotateY(5deg); - opacity: 1; + transform: perspective(1000px) rotateY(7.5deg); } 100% { transform: perspective(1000px) rotateY(0deg); @@ -730,59 +737,46 @@ } /* Out */ -@keyframes swingOutUp { +@keyframes swingOutX { 0% { transform: perspective(1000px) rotateX(0deg); } - 30% { - transform: perspective(1000px) rotateX(-20deg); - opacity:1; - } - 100% { - transform: perspective(1000px) rotateX(90deg); - opacity: 0; + 40% { + transform: perspective(1000px) rotateX(-7.5deg); } -} -@keyframes swingOutDown { - 0% { - transform: perspective(1000px) rotateX(0deg); + 60% { + transform: perspective(1000px) rotateX(17.5deg); } - 30% { - transform: perspective(1000px) rotateX(20deg); - opacity:1; + 80% { + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; } 100% { - transform: perspective(1000px) rotateX(-90deg); + transform: perspective(1000px) rotateX(90deg); opacity: 0; } } -@keyframes swingOutLeft { +@keyframes swingOutY { 0% { transform: perspective(1000px) rotateY(0deg); } - 30% { - transform: perspective(1000px) rotateY(20deg); - opacity:1; - } - 100% { - transform: perspective(1000px) rotateY(-90deg); - opacity: 0; + 40% { + transform: perspective(1000px) rotateY(7.5deg); } -} -@keyframes swingOutRight { - 0% { - transform: perspective(1000px) rotateY(0deg); + 60% { + transform: perspective(1000px) rotateY(-10deg); } - 30% { - transform: perspective(1000px) rotateY(-20deg); - opacity:1; + 80% { + transform: perspective(1000px) rotateY(30deg); + opacity: 1; } 100% { - transform: perspective(1000px) rotateY(90deg); + transform: perspective(1000px) rotateY(-90deg); opacity: 0; } } + /******************************* Static Animations *******************************/ @@ -792,21 +786,27 @@ ---------------*/ .flash.transition { + animation-duration: 750ms; animation-name: flash; } .shake.transition { + animation-duration: 750ms; animation-name: shake; } .bounce.transition { + animation-duration: 750ms; animation-name: bounce; } .tada.transition { + animation-duration: 750ms; animation-name: tada; } .pulse.transition { + animation-duration: 500ms; animation-name: pulse; } .jiggle.transition { + animation-duration: 750ms; animation-name: jiggle; }