Finally fixes css animations, fill-mode was being overwritten by using shorthand in other rules

Former-commit-id: 0750ace90d
Former-commit-id: 0b2105fb9e

src/modules/dimmer.js

@@ -17,8 +17,13 @@ $.fn.dimmer = function(parameters) {
       ? $.extend(true, {}, $.fn.dimmer.settings, parameters)
       : $.fn.dimmer.settings,
 
-    eventNamespace  = '.' + settings.namespace,
-    moduleNamespace = 'module-' + settings.namespace,
+    selector        = settings.selector,
+    namespace       = settings.namespace,
+    className       = settings.className,
+    error           = settings.error,
+
+    eventNamespace  = '.' + namespace,
+    moduleNamespace = 'module-' + namespace,
     moduleSelector  = $allModules.selector || '',
 
     time            = new Date().getTime(),
@@ -28,10 +33,6 @@ $.fn.dimmer = function(parameters) {
     methodInvoked   = (typeof query == 'string'),
     queryArguments  = [].slice.call(arguments, 1),
 
-    selector        = settings.selector,
-    namespace       = settings.namespace,
-    className       = settings.className,
-    error           = settings.error,
 
     invokedResponse
   ;
@@ -42,8 +43,6 @@ $.fn.dimmer = function(parameters) {
         $module      = $(this),
         $dimmer      = $module.children(selector.dimmer).first(),
 
-        animationEnd = 'animationend msAnimationEnd oAnimationEnd webkitAnimationEnd',
-
         element      = this,
         instance     = $dimmer.data(moduleNamespace),
         module
@@ -111,7 +110,6 @@ $.fn.dimmer = function(parameters) {
 
           click: function(event) {
             module.verbose('Determining if event occured on dimmer', event);
-            console.log(event.target, selector.content, $(event.target).is(selector.content));
             if( $dimmer.find(event.target).size() === 0 || $(event.target).is(selector.content) ) {
               module.hide();
             }
@@ -125,7 +123,7 @@ $.fn.dimmer = function(parameters) {
             if(settings.animation.show == 'css') {
               module.verbose('Showing dimmer animation with css');
               $dimmer
-                .one(animationEnd, function() {
+                .one(module.get.animationEndEvent(), function() {
                   module.set.active();
                   $dimmer.removeClass(className.show);
                 })
@@ -153,7 +151,7 @@ $.fn.dimmer = function(parameters) {
             if(settings.animation.hide == 'css') {
               module.verbose('Hiding dimmer with css');
               $dimmer
-                .one(animationEnd, function(){
+                .one(module.get.animationEndEvent(), function(){
                   module.remove.active();
                   $dimmer.removeClass(className.hide);
                 })
@@ -176,6 +174,28 @@ $.fn.dimmer = function(parameters) {
           }
         },
 
+        get: {
+
+          animationEndEvent: function() {
+            var
+              element     = document.createElement('element'),
+              animations  = {
+                'animation'       : 'animationend',
+                'OAnimation'      : 'oAnimationEnd',
+                'MozAnimation'    : 'animationend',
+                'WebkitAnimation' : 'webkitAnimationEnd'
+              },
+              animation
+            ;
+            for(animation in animations){
+              if( element.style[animation] !== undefined ){
+                return animations[animation];
+              }
+            }
+          }
+
+        },
+
         has: {
           dimmer: function() {
             return ( $module.children(selector.dimmer).size() > 0 );
@@ -347,7 +367,8 @@ $.fn.dimmer = function(parameters) {
               title = settings.moduleName + ':',
               totalTime = 0
             ;
-            time        = false;
+            time = false;
+            clearTimeout(module.performance.timer);
             $.each(performance, function(index, data) {
               totalTime += data['Execution Time'];
             });
@@ -430,8 +451,8 @@ $.fn.dimmer.settings = {
   performance : true,
 
   animation   : {
-    show: 'fade',
-    hide: 'fade'
+    show: 'css',
+    hide: 'css'
   },
 
   on       : false,

src/modules/dimmer.less

@@ -31,11 +31,17 @@
   opacity: 0;
   line-height: 1;
 
-  -webkit-animation-fill-mode: forwards;
-  -moz-animation-fill-mode: forwards;
-  -o-animation-fill-mode: forwards;
-  -ms-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  animation-fill-mode: both;
+
+  -webkit-animation-duration: 0.5s;
+  -moz-animation-duration: 0.5s;
+  -o-animation-duration: 0.5s;
+  -ms-animation-duration: 0.5s;
+  animation-duration: 0.5s;
 
   -webkit-transition:
     background-color 0.5s linear
@@ -213,10 +219,9 @@ body.ui.dimmable.dimmed > :not(.dimmer){
 .ui.dimmer.show {
   width: 100%;
   height: 100%;
-  
-  -webkit-animation: dimmer-show 0.5s;
-  -moz-animation: dimmer-show 0.5s;
-  animation: dimmer-show 0.5s;
+  -webkit-animation-name: dimmer-show;
+  -moz-animation-name: dimmer-show;
+  animation-name: dimmer-show;
 }
 
 @-webkit-keyframes dimmer-show {
@@ -245,9 +250,9 @@ body.ui.dimmable.dimmed > :not(.dimmer){
 }
 
 .ui.dimmer.hide {
-  -webkit-animation: dimmer-hide 0.5s;
-  -moz-animation: dimmer-hide 0.5s;
-  animation: dimmer-hide 0.5s;
+  -webkit-animation-name: dimmer-hide;
+  -moz-animation-name: dimmer-hide;
+  animation-name: dimmer-hide;
 }
 
 @-webkit-keyframes dimmer-hide {