From bb09b4bba77455b914137233bbfd978d093f1d4e Mon Sep 17 00:00:00 2001 From: Ryan Shaw Date: Wed, 7 Sep 2011 12:54:37 -0600 Subject: [PATCH] fix css3 transitions for jQuery show/hide need to ensure that the element always has the class name applied so the css animation takes effect. Change-Id: I26d9dbcbce8520f12223d293278bf197dabf8b53 Reviewed-on: https://gerrit.instructure.com/5470 Tested-by: Hudson Reviewed-by: Zach Wily --- public/javascripts/instructure_helper.js | 6 +++++- public/stylesheets/static/jquery-ui-theme.css | 8 ++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/public/javascripts/instructure_helper.js b/public/javascripts/instructure_helper.js index 9e3cc41193e..c8c778f25b5 100644 --- a/public/javascripts/instructure_helper.js +++ b/public/javascripts/instructure_helper.js @@ -140,7 +140,7 @@ I18n.scoped('instructure', function(I18n) { var $this = $(this); // if you can't add the class .use-css-transitions-for-show-hide to your element, you can // add it to this selector to have it use css3 transitions. - if ($this.is('.use-css-transitions-for-show-hide, .webkit .ui-widget-overlay')) { + if ($this.is('.use-css-transitions-for-show-hide, .ui-widget-overlay')) { var oldOpacityCssAttribute = this.style.opacity, oldComputedOpacity = $this.css('opacity'), newOpacity = (showHideOrRemove === 'hide' || showHideOrRemove === 'remove') ? 0 : (!oldComputedOpacity || oldComputedOpacity == "0" ? 1 : oldComputedOpacity); @@ -148,6 +148,10 @@ I18n.scoped('instructure', function(I18n) { this.style.opacity = 0; previousFn.apply($this); //change out of display:none } + + // things like '.ui-widget-overlay' may not already have this class, + // it is needed in the css to tell the browser to use the animation. + $this.addClass('use-css-transitions-for-show-hide'); $this.bind('transitionend oTransitionEnd webkitTransitionEnd', function(event){ if (event.originalEvent.propertyName === 'opacity') { previousFn.apply($(this)); //change to display:none when we are hiding. diff --git a/public/stylesheets/static/jquery-ui-theme.css b/public/stylesheets/static/jquery-ui-theme.css index a972d5ec4d2..f50177285ed 100644 --- a/public/stylesheets/static/jquery-ui-theme.css +++ b/public/stylesheets/static/jquery-ui-theme.css @@ -501,8 +501,8 @@ .use-css-transitions-for-show-hide { - -webkit-transition: opacity 1.5s; - -moz-transition: opacity 1.5s; - -o-transition: opacity 1.5; - transition: opacity 1.5s; + -webkit-transition: opacity 0.5s; + -moz-transition: opacity 0.5s; + -o-transition: opacity 0.5; + transition: opacity 0.5s; } \ No newline at end of file