From 232470981e172a075d76251b04d9ea9ace1d8095 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 8 Oct 2014 15:40:49 -0400 Subject: [PATCH] Fix issue with modal double showing in chrome --- src/definitions/modules/transition.js | 26 +++++++++------- .../default/modules/transition.overrides | 30 +++++++++---------- 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 753c70624..04825ac6e 100755 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -221,13 +221,13 @@ $.fn.transition = function() { .one(animationEnd + eventNamespace, module.complete) ; module.set.duration(settings.duration); - module.debug('Starting tween', settings.animation, $module.attr('class')); + module.debug('Starting tween', animation, $module.attr('class')); }, display: function() { var - style = $module.attr('style') || '', + style = module.get.style(), displayType = module.get.displayType(), - overrideStyle = style + ';display: ' + displayType + ' !important;' + overrideStyle = style + 'display: ' + displayType + ' !important;' ; if( $module.css('display') !== displayType ) { module.verbose('Setting inline visibility to', displayType); @@ -306,9 +306,13 @@ $.fn.transition = function() { module.verbose('Saving existence of transition', animation, exists); }, conditions: function() { + var + clasName = $module.attr('class') || false, + style = $module.attr('style') || '' + ; module.cache = { className : $module.attr('class'), - style : $module.attr('style') + style : module.get.style() }; module.verbose('Saving original attributes', module.cache); } @@ -329,12 +333,6 @@ $.fn.transition = function() { module.verbose('Restoring original style attribute', module.cache.style); $module.attr('style', module.cache.style); } - else { - if(module.get.displayType() === 'block') { - module.verbose('Removing inline style override, element defaults to block'); - $module.removeAttr('style'); - } - } if(module.is.looping()) { module.remove.looping(); } @@ -431,6 +429,12 @@ $.fn.transition = function() { } return module.displayType; }, + style: function() { + var + style = $module.attr('style') || '' + ; + return style.replace(/display.*?;/, ''); + }, transitionExists: function(animation) { return $.fn.transition.exists[animation]; }, @@ -499,11 +503,11 @@ $.fn.transition = function() { module.verbose('Determining whether animation exists'); $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module); currentAnimation = $clone + .addClass(animation) .removeClass(className.inward) .removeClass(className.outward) .addClass(className.animating) .addClass(className.transition) - .addClass(animation) .css(animationName) ; inAnimation = $clone diff --git a/src/themes/packages/default/modules/transition.overrides b/src/themes/packages/default/modules/transition.overrides index fef44f46e..19eea2813 100755 --- a/src/themes/packages/default/modules/transition.overrides +++ b/src/themes/packages/default/modules/transition.overrides @@ -101,7 +101,7 @@ ---------------*/ .slide.down.transition.in { - animation-name: slide; + animation-name: slideIn; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; @@ -112,7 +112,7 @@ } .slide.up.transition.in { - animation-name: slide; + animation-name: slideIn; transform-origin: 50% 100%; } .slide.up.transition.out { @@ -120,7 +120,7 @@ transform-origin: 50% 100%; } -@keyframes slide { +@keyframes slideIn { 0% { opacity: 0; transform: scaleY(0); @@ -153,21 +153,21 @@ } .horizontal.flip.transition.in, .horizontal.flip.transition.out { - animation-name: horizontalFlip; + animation-name: horizontalFlipIn; } .horizontal.flip.transition.out { animation-name: horizontalFlipOut; } .vertical.flip.transition.in, .vertical.flip.transition.out { - animation-name: verticalFlip; + animation-name: verticalFlipIn; } .vertical.flip.transition.out { animation-name: verticalFlipOut; } /* Horizontal */ -@keyframes horizontalFlip { +@keyframes horizontalFlipIn { 0% { transform: rotateY(-90deg); opacity: 0; @@ -190,7 +190,7 @@ } /* Vertical */ -@keyframes verticalFlip { +@keyframes verticalFlipIn { 0% { transform: rotateX(-90deg); opacity: 0; @@ -216,21 +216,21 @@ ---------------*/ .fade.transition.in { - animation-name: fade; + animation-name: fadeIn; } .fade.transition.out { animation-name: fadeOut; } .fade.up.transition.in { - animation-name: fadeUp; + animation-name: fadeUpIn; } .fade.up.transition.out { animation-name: fadeUpOut; } .fade.down.transition.in { - animation-name: fadeDown; + animation-name: fadeDownIn; } .fade.down.transition.out { animation-name: fadeDownOut; @@ -238,7 +238,7 @@ /* Fade */ -@keyframes fade { +@keyframes fadeIn { 0% { opacity: 0; } @@ -257,7 +257,7 @@ } /* Fade Up */ -@keyframes fadeUp { +@keyframes fadeUpIn { 0% { opacity: 0; transform: translateY(10%); @@ -280,7 +280,7 @@ } /* Fade Down */ -@keyframes fadeDown { +@keyframes fadeDownIn { 0% { opacity: 0; transform: translateY(-10%); @@ -306,14 +306,14 @@ ---------------*/ .scale.transition.in { - animation-name: scale; + animation-name: scaleIn; } .scale.transition.out { animation-name: scaleOut; } /* Scale */ -@keyframes scale { +@keyframes scaleIn { 0% { opacity: 0; transform: scale(0.7);