diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 9fc0c0a3a..e9e5dd666 100644 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -221,22 +221,56 @@ $.fn.transition = function() { module.verbose('Animation is outward, hiding element'); module.restore.conditions(); module.hide(); - settings.onHide.call(this); } else if( module.is.inward() ) { module.verbose('Animation is outward, showing element'); module.restore.conditions(); module.show(); - settings.onShow.call(this); } else { module.restore.conditions(); - module.show(); } - module.remove.animation(); - module.remove.animating(); } - settings.onComplete.call(this); + }, + + force: { + visible: function() { + var + style = $module.attr('style'), + userStyle = module.get.userStyle(), + displayType = module.get.displayType(), + overrideStyle = userStyle + 'display: ' + displayType + ' !important;', + currentDisplay = $module.css('display'), + emptyStyle = (style === undefined || style === '') + ; + if(currentDisplay !== displayType) { + module.verbose('Overriding default display to show element', displayType); + $module + .attr('style', overrideStyle) + ; + } + else if(emptyStyle) { + $module.removeAttr('style'); + } + }, + hidden: function() { + var + style = $module.attr('style'), + currentDisplay = $module.css('display'), + emptyStyle = (style === undefined || style === '') + ; + if(currentDisplay !== 'none' && !module.is.hidden()) { + module.verbose('Overriding default display to hide element'); + $module + .css('display', 'none') + ; + } + else if(emptyStyle) { + $module + .removeAttr('style') + ; + } + } }, has: { @@ -280,21 +314,13 @@ $.fn.transition = function() { module.save.animation(animationClass); // override display if necessary so animation appears visibly - module.set.display(); + module.force.visible(); module.remove.hidden(); module.remove.direction(); - $module - .addClass(animationClass) - .one(animationEnd + '.complete' + eventNamespace, module.complete) - ; - if(settings.useFailSafe) { - module.add.failSafe(); - } - module.set.duration(settings.duration); - settings.onStart.call(this); - module.debug('Starting tween', animation); + module.start.animation(animationClass); + }, duration: function(animationName, duration) { duration = duration || settings.duration; @@ -311,19 +337,6 @@ $.fn.transition = function() { ; } }, - display: function() { - var - style = module.get.style(), - displayType = module.get.displayType(), - overrideStyle = style + 'display: ' + displayType + ' !important;' - ; - if( $module.css('display') !== displayType ) { - module.verbose('Setting inline visibility to', displayType); - $module - .attr('style', overrideStyle) - ; - } - }, direction: function(direction) { direction = direction || module.get.direction(); if(direction == className.inward) { @@ -340,18 +353,10 @@ $.fn.transition = function() { ; }, hidden: function() { - if(!module.is.hidden()) { - $module - .addClass(className.transition) - .addClass(className.hidden) - ; - } - if($module.css('display') !== 'none') { - module.verbose('Overriding default display to hide element'); - $module - .css('display', 'none') - ; - } + $module + .addClass(className.transition) + .addClass(className.hidden) + ; }, inward: function() { module.debug('Setting direction to inward'); @@ -375,6 +380,22 @@ $.fn.transition = function() { } }, + start: { + animation: function(animationClass) { + animationClass = animationClass || module.get.animationClass(); + module.debug('Starting tween', animationClass); + $module + .addClass(animationClass) + .one(animationEnd + '.complete' + eventNamespace, module.complete) + ; + if(settings.useFailSafe) { + module.add.failSafe(); + } + module.set.duration(settings.duration); + settings.onStart.call(this); + } + }, + save: { animation: function(animation) { if(!module.cache) { @@ -399,9 +420,12 @@ $.fn.transition = function() { animation = module.get.currentAnimation() ; if(animation) { - $module.removeClass(animation); + $module + .removeClass(animation) + ; module.verbose('Removing animation class', module.cache); } + module.remove.duration(); } }, @@ -421,17 +445,6 @@ $.fn.transition = function() { animating: function() { $module.removeClass(className.animating); }, - animation: function() { - $module - .css({ - '-webkit-animation' : '', - '-moz-animation' : '', - '-ms-animation' : '', - '-o-animation' : '', - 'animation' : '' - }) - ; - }, animationCallbacks: function() { module.remove.queueCallback(); module.remove.completeCallback(); @@ -451,6 +464,11 @@ $.fn.transition = function() { .removeClass(className.outward) ; }, + duration: function() { + $module + .css('animation-duration', '') + ; + }, failSafe: function() { module.verbose('Removing fail safe timer', module.timer); if(module.timer) { @@ -594,11 +612,9 @@ $.fn.transition = function() { } return $module.data(metadata.displayType); }, - style: function() { - var - style = $module.attr('style') || '' - ; - return style.replace(/display.*?;/, ''); + userStyle: function(style) { + style = style || $module.attr('style') || ''; + return style.replace(/display.*?;/, '');; }, transitionExists: function(animation) { return $.fn.transition.exists[animation]; @@ -747,15 +763,20 @@ $.fn.transition = function() { module.remove.display(); module.remove.visible(); module.set.hidden(); - module.repaint(); + settings.onHide.call(this); + settings.onComplete.call(this); + module.force.hidden(); + // module.repaint(); }, show: function(display) { module.verbose('Showing element', display); module.remove.hidden(); module.set.visible(); - module.set.display(); - module.repaint(); + settings.onShow.call(this); + settings.onComplete.call(this); + module.force.visible(); + // module.repaint(); }, toggle: function() {