From ac559ad2553e1d63ba225fc2fbf9669145fea6e3 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 23 Feb 2015 18:19:03 -0500 Subject: [PATCH] Add new transition settings for grouped animations --- RELEASE-NOTES.md | 4 ++ src/definitions/elements/image.less | 7 +++ src/definitions/modules/transition.js | 65 +++++++++++++++++++++++---- 3 files changed, 67 insertions(+), 9 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index e651e8be4..0d571086a 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -2,6 +2,9 @@ ### Version 1.10.0 - February 23, 2015 +**New Features** +- **Transition** - Transitions now have `interval` to allow grouped elements to animate one by one with a delay between each animation. Grouped animations determine order based on transition direction to avoid reflows, or can manually be reversed by using reverse: true [See Examples](http://laptop-vm:9778/modules/transition.html#grouped-transitions) for more details. + **Critical Fixes** - **Transition** - Webkit `failSafe` used for [Chromium Bug #437860](https://code.google.com/p/chromium/issues/detail?id=437860) now also works for queued animations @@ -10,6 +13,7 @@ - **Form Validation** - `contains` rule is now case insensitive - **Form Validation** - Validation messages no longer increase field height on `inline fields` like checkboxes after error appears - **API** - Added `was cancelled` to determine whether request was cancelled by `beforeSend` +- **Image* - Added `hidden image` state **Fixes** - **Build Tools** - Fixed issue with recursive merge for site themes in update scripts, [details here](https://github.com/Semantic-Org/Semantic-UI/pull/1845) Thanks @derekslife diff --git a/src/definitions/elements/image.less b/src/definitions/elements/image.less index d7028555f..9d1352329 100755 --- a/src/definitions/elements/image.less +++ b/src/definitions/elements/image.less @@ -47,7 +47,13 @@ img.ui.image { States *******************************/ +.ui.hidden.images, +.ui.hidden.image { + display: none; +} + +.ui.disabled.images, .ui.disabled.image { cursor: default; opacity: @disabledOpacity; @@ -269,6 +275,7 @@ img.ui.bordered.image { font-size: @massive; } + /******************************* Groups *******************************/ diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 0b1ae7b12..9309f9e38 100644 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -87,7 +87,7 @@ $.fn.transition = function() { if(methodInvoked === false) { module.verbose('Converted arguments into settings object', settings); if(settings.interval) { - setTimeout(module.animate, settings.interval * index); + module.delay(settings.animate); } else { module.animate(); @@ -137,6 +137,24 @@ $.fn.transition = function() { ; }, + delay: function(interval) { + var + isReverse = (settings.reverse === true), + shouldReverse = (settings.reverse == 'auto' && module.get.direction() == className.outward), + delay + ; + interval = (typeof interval !== undefined) + ? interval + : settings.interval + ; + delay = (isReverse || shouldReverse) + ? ($allModules.length - index) * settings.interval + : index * settings.interval + ; + module.debug('Delaying animation by', delay); + setTimeout(module.animate, delay); + }, + animate: function(overrideSettings) { settings = overrideSettings || settings; if(!module.is.supported()) { @@ -324,12 +342,12 @@ $.fn.transition = function() { .addClass(className.transition) .addClass(className.hidden) ; - if($module.css('display') !== 'none') { - module.verbose('Overriding default display to hide element'); - $module - .css('display', 'none') - ; - } + } + if($module.css('display') !== 'none') { + module.verbose('Overriding default display to hide element'); + $module + .css('display', 'none') + ; } }, visible: function() { @@ -351,7 +369,7 @@ $.fn.transition = function() { conditions: function() { var clasName = $module.attr('class') || false, - style = $module.attr('style') || '' + style = $module.attr('style') || '' ; $module.removeClass(settings.animation); module.remove.direction(); @@ -376,6 +394,7 @@ $.fn.transition = function() { } if(module.cache.style) { module.verbose('Restoring original style attribute', module.cache.style); + console.log('restoring cache', module.cache.style); $module.attr('style', module.cache.style); } if(module.is.looping()) { @@ -492,6 +511,31 @@ $.fn.transition = function() { } return $.fn.transition.settings; }, + direction: function(animation) { + // quickest manually specified direction + animation = animation || settings.animation; + if(typeof animation === 'string') { + animation = animation.split(' '); + $.each(animation, function(index, word){ + if(word === className.inward) { + return className.inward; + } + else if(word === className.outward) { + return className.outward; + } + }); + } + // slower backup + if( !module.can.transition() ) { + return 'static'; + } + if($module.is(':visible') && !module.is.hidden()) { + return className.outward; + } + else { + return className.inward; + } + }, duration: function(duration) { duration = duration || settings.duration; if(duration === false) { @@ -900,7 +944,10 @@ $.fn.transition.settings = { // delay between animations in group interval : 0, - // animation complete event + // whether group animations should be reversed + reverse : 'auto', + + // animation callback event onStart : function() {}, onComplete : function() {}, onShow : function() {},