Adds transition lib to dropdowns!

build/minified/modules/dropdown.js

@@ -21,7 +21,6 @@ $.fn.dropdown = function(parameters) {
     className       = settings.className,
     metadata        = settings.metadata,
     namespace       = settings.namespace,
-    animation       = settings.animation,
     selector        = settings.selector,
     errors          = settings.errors,
     
@@ -252,6 +251,9 @@ $.fn.dropdown = function(parameters) {
             module.debug('Adding selected value to hidden input', value, $input);
             $input.val(value);
           },
+          visible: function() {
+            $module.addClass(className.visible);
+          },
           selected: function(value) {
             var
               $selectedItem = module.get.item(value),
@@ -271,6 +273,12 @@ $.fn.dropdown = function(parameters) {
           }
         },
 
+        remove: {
+          visible: function() {
+            $module.removeClass(className.visible);
+          }
+        },
+
         is: {
           visible: function() {
             return $menu.is(':visible');
@@ -290,21 +298,17 @@ $.fn.dropdown = function(parameters) {
         },
 
         animate: {
-          show: function() {
+          show: function(callback) {
             module.verbose('Doing menu showing animation');
-            if(animation.show == 'none') {
-              $menu
-                .show()
-              ;
+            callback = callback || function(){};
+
+            if(settings.animation == 'none') {
+              callback();
             }
-            else if(animation.show == 'fade') {
-              $menu
-                .hide()
-                .clearQueue()
-                .fadeIn(150, module.event.resetStyle)
-              ;
+            else if($.fn.transition !== undefined) {
+              $menu.transition(settings.animation, settings.duration, callback);
             }
-            else if(animation.show == 'slide') {
+            else if(settings.animation == 'slide down') {
               $menu
                 .hide()
                 .clearQueue()
@@ -314,30 +318,39 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .animate({
                     opacity : 1
-                  }, 200, 'easeOutQuad', module.event.resetStyle)
+                  }, settings.duration, 'easeOutQuad', module.event.resetStyle)
                   .end()
-                .slideDown(100, 'easeOutQuad', module.event.resetStyle)
+                .slideDown(100, 'easeOutQuad', function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
+              ;
+            }
+            else if(settings.animation == 'fade') {
+              $menu
+                .hide()
+                .clearQueue()
+                .fadeIn(settings.duration, function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
               ;
             }
             else {
               module.error(errors.animation);
             }
           },
-          hide: function() {
+          hide: function(callback) {
             module.verbose('Doing menu hiding animation');
-            if(animation.hide == 'none') {
-              $menu
-                .hide()
-              ;
+            callback = callback || function(){};
+
+            if(settings.animation == 'none') {
+              callback();
             }
-            else if(animation.hide == 'fade') {
-              $menu
-                .show()
-                .clearQueue()
-                .fadeOut(150, module.event.resetStyle)
-              ;
+            else if($.fn.transition !== undefined) {
+              $menu.transition(settings.animation, settings.duration, callback);
             }
-            else if(animation.hide == 'slide') {
+            else if(settings.animation == 'slide down') {
               $menu
                 .show()
                 .clearQueue()
@@ -349,7 +362,20 @@ $.fn.dropdown = function(parameters) {
                   }, 100, 'easeOutQuad', module.event.resetStyle)
                   .end()
                 .delay(50)
-                .slideUp(100, 'easeOutQuad', module.event.resetStyle)
+                .slideUp(100, 'easeOutQuad', function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
+              ;
+            }
+            else if(settings.animation == 'fade') {
+              $menu
+                .show()
+                .clearQueue()
+                .fadeOut(150, function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
               ;
             }
             else {
@@ -362,28 +388,22 @@ $.fn.dropdown = function(parameters) {
           module.debug('Checking if dropdown can show');
           if( !module.is.visible() ) {
             module.hideOthers();
-            $module
-              .addClass(className.visible)
-            ;
-            module.animate.show();
+            module.animate.show(module.set.visible);
             if( module.can.click() ) {
               module.intent.bind();
             }
-            $.proxy(settings.onShow, $module.get() )();
+            $.proxy(settings.onShow, element)();
           }
         },
 
         hide: function() {
           if( !module.is.hidden() ) {
             module.debug('Hiding dropdown');
-            $module
-              .removeClass(className.visible)
-            ;
             if( module.can.click() ) {
               module.intent.unbind();
             }
-            module.animate.hide();
-            $.proxy(settings.onHide, $module.get() )();
+            module.animate.hide(module.remove.visible);
+            $.proxy(settings.onHide, element)();
           }
         },
 
@@ -589,10 +609,8 @@ $.fn.dropdown.settings = {
     hide: 300
   },
   
-  animation   : {
-    show: 'slide',
-    hide: 'slide'
-  },
+  animation : 'slide down',
+  duration  : 250,
   
   onChange : function(){},
   onShow   : function(){},

build/packaged/modules/dropdown.js

@@ -21,7 +21,6 @@ $.fn.dropdown = function(parameters) {
     className       = settings.className,
     metadata        = settings.metadata,
     namespace       = settings.namespace,
-    animation       = settings.animation,
     selector        = settings.selector,
     errors          = settings.errors,
     
@@ -252,6 +251,9 @@ $.fn.dropdown = function(parameters) {
             module.debug('Adding selected value to hidden input', value, $input);
             $input.val(value);
           },
+          visible: function() {
+            $module.addClass(className.visible);
+          },
           selected: function(value) {
             var
               $selectedItem = module.get.item(value),
@@ -271,6 +273,12 @@ $.fn.dropdown = function(parameters) {
           }
         },
 
+        remove: {
+          visible: function() {
+            $module.removeClass(className.visible);
+          }
+        },
+
         is: {
           visible: function() {
             return $menu.is(':visible');
@@ -290,21 +298,17 @@ $.fn.dropdown = function(parameters) {
         },
 
         animate: {
-          show: function() {
+          show: function(callback) {
             module.verbose('Doing menu showing animation');
-            if(animation.show == 'none') {
-              $menu
-                .show()
-              ;
+            callback = callback || function(){};
+
+            if(settings.animation == 'none') {
+              callback();
             }
-            else if(animation.show == 'fade') {
-              $menu
-                .hide()
-                .clearQueue()
-                .fadeIn(150, module.event.resetStyle)
-              ;
+            else if($.fn.transition !== undefined) {
+              $menu.transition(settings.animation, settings.duration, callback);
             }
-            else if(animation.show == 'slide') {
+            else if(settings.animation == 'slide down') {
               $menu
                 .hide()
                 .clearQueue()
@@ -314,30 +318,39 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .animate({
                     opacity : 1
-                  }, 200, 'easeOutQuad', module.event.resetStyle)
+                  }, settings.duration, 'easeOutQuad', module.event.resetStyle)
                   .end()
-                .slideDown(100, 'easeOutQuad', module.event.resetStyle)
+                .slideDown(100, 'easeOutQuad', function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
+              ;
+            }
+            else if(settings.animation == 'fade') {
+              $menu
+                .hide()
+                .clearQueue()
+                .fadeIn(settings.duration, function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
               ;
             }
             else {
               module.error(errors.animation);
             }
           },
-          hide: function() {
+          hide: function(callback) {
             module.verbose('Doing menu hiding animation');
-            if(animation.hide == 'none') {
-              $menu
-                .hide()
-              ;
+            callback = callback || function(){};
+
+            if(settings.animation == 'none') {
+              callback();
             }
-            else if(animation.hide == 'fade') {
-              $menu
-                .show()
-                .clearQueue()
-                .fadeOut(150, module.event.resetStyle)
-              ;
+            else if($.fn.transition !== undefined) {
+              $menu.transition(settings.animation, settings.duration, callback);
             }
-            else if(animation.hide == 'slide') {
+            else if(settings.animation == 'slide down') {
               $menu
                 .show()
                 .clearQueue()
@@ -349,7 +362,20 @@ $.fn.dropdown = function(parameters) {
                   }, 100, 'easeOutQuad', module.event.resetStyle)
                   .end()
                 .delay(50)
-                .slideUp(100, 'easeOutQuad', module.event.resetStyle)
+                .slideUp(100, 'easeOutQuad', function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
+              ;
+            }
+            else if(settings.animation == 'fade') {
+              $menu
+                .show()
+                .clearQueue()
+                .fadeOut(150, function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
               ;
             }
             else {
@@ -362,28 +388,22 @@ $.fn.dropdown = function(parameters) {
           module.debug('Checking if dropdown can show');
           if( !module.is.visible() ) {
             module.hideOthers();
-            $module
-              .addClass(className.visible)
-            ;
-            module.animate.show();
+            module.animate.show(module.set.visible);
             if( module.can.click() ) {
               module.intent.bind();
             }
-            $.proxy(settings.onShow, $module.get() )();
+            $.proxy(settings.onShow, element)();
           }
         },
 
         hide: function() {
           if( !module.is.hidden() ) {
             module.debug('Hiding dropdown');
-            $module
-              .removeClass(className.visible)
-            ;
             if( module.can.click() ) {
               module.intent.unbind();
             }
-            module.animate.hide();
-            $.proxy(settings.onHide, $module.get() )();
+            module.animate.hide(module.remove.visible);
+            $.proxy(settings.onHide, element)();
           }
         },
 
@@ -589,10 +609,8 @@ $.fn.dropdown.settings = {
     hide: 300
   },
   
-  animation   : {
-    show: 'slide',
-    hide: 'slide'
-  },
+  animation : 'slide down',
+  duration  : 250,
   
   onChange : function(){},
   onShow   : function(){},

build/uncompressed/modules/dropdown.css

@@ -22,13 +22,15 @@
   -ms-transition: border-radius 0.1s ease, width 0.2s ease;
   transition: border-radius 0.1s ease, width 0.2s ease;
 }
-.ui.dropdown .menu {
+.ui.dropdown > .menu {
   position: absolute;
   display: none;
   top: 100%;
+  margin: 0em;
   background-color: #FFFFFF;
   min-width: 100%;
   white-space: nowrap;
+  font-size: 0.875em;
   text-shadow: none;
   -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
@@ -203,6 +205,10 @@
   -webkit-border-radius: 0px 0px 0.325em 0.325em;
   border-radius: 0px 0px 0.325em 0.325em;
 }
+.ui.selection.dropdown .menu:after,
+.ui.selection.dropdown .menu:before {
+  display: none;
+}
 .ui.selection.dropdown .menu img {
   height: 2.5em;
   display: inline-block;
@@ -250,9 +256,11 @@
   border-radius: 0.325em;
 }
 .ui.pointing.dropdown .menu:after {
+  display: block;
   position: absolute;
   pointer-events: none;
   content: " ";
+  visibility: visible;
   width: 0.5em;
   height: 0.5em;
   -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);

build/uncompressed/modules/dropdown.js

@@ -21,7 +21,6 @@ $.fn.dropdown = function(parameters) {
     className       = settings.className,
     metadata        = settings.metadata,
     namespace       = settings.namespace,
-    animation       = settings.animation,
     selector        = settings.selector,
     errors          = settings.errors,
     
@@ -252,6 +251,9 @@ $.fn.dropdown = function(parameters) {
             module.debug('Adding selected value to hidden input', value, $input);
             $input.val(value);
           },
+          visible: function() {
+            $module.addClass(className.visible);
+          },
           selected: function(value) {
             var
               $selectedItem = module.get.item(value),
@@ -271,6 +273,12 @@ $.fn.dropdown = function(parameters) {
           }
         },
 
+        remove: {
+          visible: function() {
+            $module.removeClass(className.visible);
+          }
+        },
+
         is: {
           visible: function() {
             return $menu.is(':visible');
@@ -290,21 +298,17 @@ $.fn.dropdown = function(parameters) {
         },
 
         animate: {
-          show: function() {
+          show: function(callback) {
             module.verbose('Doing menu showing animation');
-            if(animation.show == 'none') {
-              $menu
-                .show()
-              ;
+            callback = callback || function(){};
+
+            if(settings.animation == 'none') {
+              callback();
             }
-            else if(animation.show == 'fade') {
-              $menu
-                .hide()
-                .clearQueue()
-                .fadeIn(150, module.event.resetStyle)
-              ;
+            else if($.fn.transition !== undefined) {
+              $menu.transition(settings.animation, settings.duration, callback);
             }
-            else if(animation.show == 'slide') {
+            else if(settings.animation == 'slide down') {
               $menu
                 .hide()
                 .clearQueue()
@@ -314,30 +318,39 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .animate({
                     opacity : 1
-                  }, 200, 'easeOutQuad', module.event.resetStyle)
+                  }, settings.duration, 'easeOutQuad', module.event.resetStyle)
                   .end()
-                .slideDown(100, 'easeOutQuad', module.event.resetStyle)
+                .slideDown(100, 'easeOutQuad', function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
+              ;
+            }
+            else if(settings.animation == 'fade') {
+              $menu
+                .hide()
+                .clearQueue()
+                .fadeIn(settings.duration, function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
               ;
             }
             else {
               module.error(errors.animation);
             }
           },
-          hide: function() {
+          hide: function(callback) {
             module.verbose('Doing menu hiding animation');
-            if(animation.hide == 'none') {
-              $menu
-                .hide()
-              ;
+            callback = callback || function(){};
+
+            if(settings.animation == 'none') {
+              callback();
             }
-            else if(animation.hide == 'fade') {
-              $menu
-                .show()
-                .clearQueue()
-                .fadeOut(150, module.event.resetStyle)
-              ;
+            else if($.fn.transition !== undefined) {
+              $menu.transition(settings.animation, settings.duration, callback);
             }
-            else if(animation.hide == 'slide') {
+            else if(settings.animation == 'slide down') {
               $menu
                 .show()
                 .clearQueue()
@@ -349,7 +362,20 @@ $.fn.dropdown = function(parameters) {
                   }, 100, 'easeOutQuad', module.event.resetStyle)
                   .end()
                 .delay(50)
-                .slideUp(100, 'easeOutQuad', module.event.resetStyle)
+                .slideUp(100, 'easeOutQuad', function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
+              ;
+            }
+            else if(settings.animation == 'fade') {
+              $menu
+                .show()
+                .clearQueue()
+                .fadeOut(150, function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
               ;
             }
             else {
@@ -362,28 +388,22 @@ $.fn.dropdown = function(parameters) {
           module.debug('Checking if dropdown can show');
           if( !module.is.visible() ) {
             module.hideOthers();
-            $module
-              .addClass(className.visible)
-            ;
-            module.animate.show();
+            module.animate.show(module.set.visible);
             if( module.can.click() ) {
               module.intent.bind();
             }
-            $.proxy(settings.onShow, $module.get() )();
+            $.proxy(settings.onShow, element)();
           }
         },
 
         hide: function() {
           if( !module.is.hidden() ) {
             module.debug('Hiding dropdown');
-            $module
-              .removeClass(className.visible)
-            ;
             if( module.can.click() ) {
               module.intent.unbind();
             }
-            module.animate.hide();
-            $.proxy(settings.onHide, $module.get() )();
+            module.animate.hide(module.remove.visible);
+            $.proxy(settings.onHide, element)();
           }
         },
 
@@ -589,10 +609,8 @@ $.fn.dropdown.settings = {
     hide: 300
   },
   
-  animation   : {
-    show: 'slide',
-    hide: 'slide'
-  },
+  animation : 'slide down',
+  duration  : 250,
   
   onChange : function(){},
   onShow   : function(){},

build/uncompressed/modules/transition.css

@@ -27,11 +27,18 @@
   -ms-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
+  animation-timing-function: ease;
+  -webkit-animation-timing-function: ease;
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
   -ms-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
 }
 /*******************************
        States
@@ -172,6 +179,71 @@
   -o-animation-name: scale;
   animation-name: scale;
 }
+/*--------------
+      Slide
+---------------*/
+.ui.slide.down.transition.in,
+.ui.slide.down.transition.out {
+  -webkit-animation-name: slide;
+  -moz-animation-name: slide;
+  -o-animation-name: slide;
+  animation-name: slide;
+  transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  -webkit-transform-origin: 50% 0%;
+}
+.ui.slide.up.transition.in,
+.ui.slide.up.transition.out {
+  -webkit-animation-name: slide;
+  -moz-animation-name: slide;
+  -o-animation-name: slide;
+  animation-name: slide;
+  transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  -webkit-transform-origin: 50% 100%;
+}
+.ui.slide.up.transition > *,
+.ui.slide.down.transition > * {
+  -webkit-animation-name: fade;
+  -moz-animation-name: fade;
+  -o-animation-name: fade;
+  animation-name: fade;
+  -webkit-animation-duration: 0.3s;
+  -moz-animation-duration: 0.3s;
+  -ms-animation-duration: 0.3s;
+  -o-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+}
+@-moz-keyframes slide {
+  0% {
+    opacity: 0;
+    -moz-transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: scaleY(1);
+  }
+}
+@-webkit-keyframes slide {
+  0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+  }
+}
+@keyframes slide {
+  0% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
 /*******************************
        Animations
 *******************************/
@@ -179,6 +251,17 @@
   Emphasis
 ---------------*/
 /* Flash */
+@-webkit-keyframes flash {
+  0%,
+  50%,
+  100% {
+    opacity: 1;
+  }
+  25%,
+  75% {
+    opacity: 0;
+  }
+}
 @-moz-keyframes flash {
   0%,
   50%,

node/src/documents/modules/transition.html

@@ -53,6 +53,14 @@ type   : 'UI Module'
     ;
       </div>
 
+      <h3 class="ui header">Static Animations</h3>
+      <p>Animations that do not have an in or out animation defined, will maintain their current visibility after running</p>
+      <div class="code" data-demo="true" data-title="Looping">
+      $('.dog.image')
+        .transition('pulse')
+      ;
+      </div>
+
       <h3 class="ui header">Transition Direction</h3>
 
       <p>If an animation direction is not specified it will automatically be determined based on the elements current visibility. For example, if the element is visible the animation "fade out" will be called, if the animation is not visible "fade in".</p>
@@ -88,19 +96,6 @@ type   : 'UI Module'
     ;
       </div>
 
-      <h3 class="ui header">Looping</h3>
-      <div class="code" data-demo="true" data-title="Looping">
-    $('.dog.image')
-      .transition('set looping')
-      .transition('pulse')
-    ;
-      </div>
-      <div class="code" data-demo="true" data-title="Stop Looping">
-    $('.dog.image')
-      .transition('remove looping')
-    ;
-      </div>
-
       <h2 class="ui dividing header">Types</h2>
 
       <h3>Emphasis</h3>
@@ -173,6 +168,16 @@ type   : 'UI Module'
         </div>
       </div>
 
+      <div class="example">
+        <h4 class="ui header">Slide</h4>
+        <div class="code" data-demo="true">
+    $('.dog.image')
+      .transition('slide up')
+      .transition('slide down')
+    ;
+        </div>
+      </div>
+
       <h2 class="ui dividing header">Behavior</h2>
 
       <h2 class="ui dividing header">Settings</h2>

node/src/files/components/semantic/modules/dropdown.css

@@ -22,13 +22,15 @@
   -ms-transition: border-radius 0.1s ease, width 0.2s ease;
   transition: border-radius 0.1s ease, width 0.2s ease;
 }
-.ui.dropdown .menu {
+.ui.dropdown > .menu {
   position: absolute;
   display: none;
   top: 100%;
+  margin: 0em;
   background-color: #FFFFFF;
   min-width: 100%;
   white-space: nowrap;
+  font-size: 0.875em;
   text-shadow: none;
   -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
@@ -203,6 +205,10 @@
   -webkit-border-radius: 0px 0px 0.325em 0.325em;
   border-radius: 0px 0px 0.325em 0.325em;
 }
+.ui.selection.dropdown .menu:after,
+.ui.selection.dropdown .menu:before {
+  display: none;
+}
 .ui.selection.dropdown .menu img {
   height: 2.5em;
   display: inline-block;
@@ -250,9 +256,11 @@
   border-radius: 0.325em;
 }
 .ui.pointing.dropdown .menu:after {
+  display: block;
   position: absolute;
   pointer-events: none;
   content: " ";
+  visibility: visible;
   width: 0.5em;
   height: 0.5em;
   -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);

node/src/files/components/semantic/modules/dropdown.js

@@ -21,7 +21,6 @@ $.fn.dropdown = function(parameters) {
     className       = settings.className,
     metadata        = settings.metadata,
     namespace       = settings.namespace,
-    animation       = settings.animation,
     selector        = settings.selector,
     errors          = settings.errors,
     
@@ -252,6 +251,9 @@ $.fn.dropdown = function(parameters) {
             module.debug('Adding selected value to hidden input', value, $input);
             $input.val(value);
           },
+          visible: function() {
+            $module.addClass(className.visible);
+          },
           selected: function(value) {
             var
               $selectedItem = module.get.item(value),
@@ -271,6 +273,12 @@ $.fn.dropdown = function(parameters) {
           }
         },
 
+        remove: {
+          visible: function() {
+            $module.removeClass(className.visible);
+          }
+        },
+
         is: {
           visible: function() {
             return $menu.is(':visible');
@@ -290,21 +298,17 @@ $.fn.dropdown = function(parameters) {
         },
 
         animate: {
-          show: function() {
+          show: function(callback) {
             module.verbose('Doing menu showing animation');
-            if(animation.show == 'none') {
-              $menu
-                .show()
-              ;
+            callback = callback || function(){};
+
+            if(settings.animation == 'none') {
+              callback();
             }
-            else if(animation.show == 'fade') {
-              $menu
-                .hide()
-                .clearQueue()
-                .fadeIn(150, module.event.resetStyle)
-              ;
+            else if($.fn.transition !== undefined) {
+              $menu.transition(settings.animation, settings.duration, callback);
             }
-            else if(animation.show == 'slide') {
+            else if(settings.animation == 'slide down') {
               $menu
                 .hide()
                 .clearQueue()
@@ -314,30 +318,39 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .animate({
                     opacity : 1
-                  }, 200, 'easeOutQuad', module.event.resetStyle)
+                  }, settings.duration, 'easeOutQuad', module.event.resetStyle)
                   .end()
-                .slideDown(100, 'easeOutQuad', module.event.resetStyle)
+                .slideDown(100, 'easeOutQuad', function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
+              ;
+            }
+            else if(settings.animation == 'fade') {
+              $menu
+                .hide()
+                .clearQueue()
+                .fadeIn(settings.duration, function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
               ;
             }
             else {
               module.error(errors.animation);
             }
           },
-          hide: function() {
+          hide: function(callback) {
             module.verbose('Doing menu hiding animation');
-            if(animation.hide == 'none') {
-              $menu
-                .hide()
-              ;
+            callback = callback || function(){};
+
+            if(settings.animation == 'none') {
+              callback();
             }
-            else if(animation.hide == 'fade') {
-              $menu
-                .show()
-                .clearQueue()
-                .fadeOut(150, module.event.resetStyle)
-              ;
+            else if($.fn.transition !== undefined) {
+              $menu.transition(settings.animation, settings.duration, callback);
             }
-            else if(animation.hide == 'slide') {
+            else if(settings.animation == 'slide down') {
               $menu
                 .show()
                 .clearQueue()
@@ -349,7 +362,20 @@ $.fn.dropdown = function(parameters) {
                   }, 100, 'easeOutQuad', module.event.resetStyle)
                   .end()
                 .delay(50)
-                .slideUp(100, 'easeOutQuad', module.event.resetStyle)
+                .slideUp(100, 'easeOutQuad', function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
+              ;
+            }
+            else if(settings.animation == 'fade') {
+              $menu
+                .show()
+                .clearQueue()
+                .fadeOut(150, function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
               ;
             }
             else {
@@ -362,28 +388,22 @@ $.fn.dropdown = function(parameters) {
           module.debug('Checking if dropdown can show');
           if( !module.is.visible() ) {
             module.hideOthers();
-            $module
-              .addClass(className.visible)
-            ;
-            module.animate.show();
+            module.animate.show(module.set.visible);
             if( module.can.click() ) {
               module.intent.bind();
             }
-            $.proxy(settings.onShow, $module.get() )();
+            $.proxy(settings.onShow, element)();
           }
         },
 
         hide: function() {
           if( !module.is.hidden() ) {
             module.debug('Hiding dropdown');
-            $module
-              .removeClass(className.visible)
-            ;
             if( module.can.click() ) {
               module.intent.unbind();
             }
-            module.animate.hide();
-            $.proxy(settings.onHide, $module.get() )();
+            module.animate.hide(module.remove.visible);
+            $.proxy(settings.onHide, element)();
           }
         },
 
@@ -589,10 +609,8 @@ $.fn.dropdown.settings = {
     hide: 300
   },
   
-  animation   : {
-    show: 'slide',
-    hide: 'slide'
-  },
+  animation : 'slide down',
+  duration  : 250,
   
   onChange : function(){},
   onShow   : function(){},

node/src/files/components/semantic/modules/transition.css

@@ -27,11 +27,18 @@
   -ms-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
+  animation-timing-function: ease;
+  -webkit-animation-timing-function: ease;
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
   -ms-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
 }
 /*******************************
        States
@@ -172,6 +179,71 @@
   -o-animation-name: scale;
   animation-name: scale;
 }
+/*--------------
+      Slide
+---------------*/
+.ui.slide.down.transition.in,
+.ui.slide.down.transition.out {
+  -webkit-animation-name: slide;
+  -moz-animation-name: slide;
+  -o-animation-name: slide;
+  animation-name: slide;
+  transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  -webkit-transform-origin: 50% 0%;
+}
+.ui.slide.up.transition.in,
+.ui.slide.up.transition.out {
+  -webkit-animation-name: slide;
+  -moz-animation-name: slide;
+  -o-animation-name: slide;
+  animation-name: slide;
+  transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  -webkit-transform-origin: 50% 100%;
+}
+.ui.slide.up.transition > *,
+.ui.slide.down.transition > * {
+  -webkit-animation-name: fade;
+  -moz-animation-name: fade;
+  -o-animation-name: fade;
+  animation-name: fade;
+  -webkit-animation-duration: 0.3s;
+  -moz-animation-duration: 0.3s;
+  -ms-animation-duration: 0.3s;
+  -o-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+}
+@-moz-keyframes slide {
+  0% {
+    opacity: 0;
+    -moz-transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: scaleY(1);
+  }
+}
+@-webkit-keyframes slide {
+  0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+  }
+}
+@keyframes slide {
+  0% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
 /*******************************
        Animations
 *******************************/
@@ -179,6 +251,17 @@
   Emphasis
 ---------------*/
 /* Flash */
+@-webkit-keyframes flash {
+  0%,
+  50%,
+  100% {
+    opacity: 1;
+  }
+  25%,
+  75% {
+    opacity: 0;
+  }
+}
 @-moz-keyframes flash {
   0%,
   50%,

src/modules/dropdown.js

@@ -21,7 +21,6 @@ $.fn.dropdown = function(parameters) {
     className       = settings.className,
     metadata        = settings.metadata,
     namespace       = settings.namespace,
-    animation       = settings.animation,
     selector        = settings.selector,
     errors          = settings.errors,
     
@@ -252,6 +251,9 @@ $.fn.dropdown = function(parameters) {
             module.debug('Adding selected value to hidden input', value, $input);
             $input.val(value);
           },
+          visible: function() {
+            $module.addClass(className.visible);
+          },
           selected: function(value) {
             var
               $selectedItem = module.get.item(value),
@@ -271,6 +273,12 @@ $.fn.dropdown = function(parameters) {
           }
         },
 
+        remove: {
+          visible: function() {
+            $module.removeClass(className.visible);
+          }
+        },
+
         is: {
           visible: function() {
             return $menu.is(':visible');
@@ -290,21 +298,17 @@ $.fn.dropdown = function(parameters) {
         },
 
         animate: {
-          show: function() {
+          show: function(callback) {
             module.verbose('Doing menu showing animation');
-            if(animation.show == 'none') {
-              $menu
-                .show()
-              ;
+            callback = callback || function(){};
+
+            if(settings.animation == 'none') {
+              callback();
             }
-            else if(animation.show == 'fade') {
-              $menu
-                .hide()
-                .clearQueue()
-                .fadeIn(150, module.event.resetStyle)
-              ;
+            else if($.fn.transition !== undefined) {
+              $menu.transition(settings.animation, settings.duration, callback);
             }
-            else if(animation.show == 'slide') {
+            else if(settings.animation == 'slide down') {
               $menu
                 .hide()
                 .clearQueue()
@@ -314,30 +318,39 @@ $.fn.dropdown = function(parameters) {
                   .delay(50)
                   .animate({
                     opacity : 1
-                  }, 200, 'easeOutQuad', module.event.resetStyle)
+                  }, settings.duration, 'easeOutQuad', module.event.resetStyle)
                   .end()
-                .slideDown(100, 'easeOutQuad', module.event.resetStyle)
+                .slideDown(100, 'easeOutQuad', function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
+              ;
+            }
+            else if(settings.animation == 'fade') {
+              $menu
+                .hide()
+                .clearQueue()
+                .fadeIn(settings.duration, function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
               ;
             }
             else {
               module.error(errors.animation);
             }
           },
-          hide: function() {
+          hide: function(callback) {
             module.verbose('Doing menu hiding animation');
-            if(animation.hide == 'none') {
-              $menu
-                .hide()
-              ;
+            callback = callback || function(){};
+
+            if(settings.animation == 'none') {
+              callback();
             }
-            else if(animation.hide == 'fade') {
-              $menu
-                .show()
-                .clearQueue()
-                .fadeOut(150, module.event.resetStyle)
-              ;
+            else if($.fn.transition !== undefined) {
+              $menu.transition(settings.animation, settings.duration, callback);
             }
-            else if(animation.hide == 'slide') {
+            else if(settings.animation == 'slide down') {
               $menu
                 .show()
                 .clearQueue()
@@ -349,7 +362,20 @@ $.fn.dropdown = function(parameters) {
                   }, 100, 'easeOutQuad', module.event.resetStyle)
                   .end()
                 .delay(50)
-                .slideUp(100, 'easeOutQuad', module.event.resetStyle)
+                .slideUp(100, 'easeOutQuad', function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
+              ;
+            }
+            else if(settings.animation == 'fade') {
+              $menu
+                .show()
+                .clearQueue()
+                .fadeOut(150, function() {
+                  $.proxy(module.event.resetStyle, this)();
+                  callback();
+                })
               ;
             }
             else {
@@ -362,28 +388,22 @@ $.fn.dropdown = function(parameters) {
           module.debug('Checking if dropdown can show');
           if( !module.is.visible() ) {
             module.hideOthers();
-            $module
-              .addClass(className.visible)
-            ;
-            module.animate.show();
+            module.animate.show(module.set.visible);
             if( module.can.click() ) {
               module.intent.bind();
             }
-            $.proxy(settings.onShow, $module.get() )();
+            $.proxy(settings.onShow, element)();
           }
         },
 
         hide: function() {
           if( !module.is.hidden() ) {
             module.debug('Hiding dropdown');
-            $module
-              .removeClass(className.visible)
-            ;
             if( module.can.click() ) {
               module.intent.unbind();
             }
-            module.animate.hide();
-            $.proxy(settings.onHide, $module.get() )();
+            module.animate.hide(module.remove.visible);
+            $.proxy(settings.onHide, element)();
           }
         },
 
@@ -589,10 +609,8 @@ $.fn.dropdown.settings = {
     hide: 300
   },
   
-  animation   : {
-    show: 'slide',
-    hide: 'slide'
-  },
+  animation : 'slide down',
+  duration  : 250,
   
   onChange : function(){},
   onShow   : function(){},

src/modules/dropdown.less

@@ -43,14 +43,17 @@
   ;
 }
 
-.ui.dropdown .menu {
+.ui.dropdown > .menu {
   position: absolute;
   display: none;
   top: 100%;
+
+  margin: 0em;
   background-color: #FFFFFF;
   min-width: 100%;
-  white-space: nowrap;
 
+  white-space: nowrap;
+  font-size: 0.875em;
   text-shadow: none;
 
   -webkit-box-shadow:
@@ -270,6 +273,10 @@
   -webkit-border-radius: 0px 0px 0.325em 0.325em;
   border-radius: 0px 0px 0.325em 0.325em;
 }
+.ui.selection.dropdown .menu:after,
+.ui.selection.dropdown .menu:before {
+  display: none;
+}
 .ui.selection.dropdown .menu img {
   height: 2.5em;
   display: inline-block;
@@ -325,10 +332,11 @@
 }
 
 .ui.pointing.dropdown .menu:after {
+  display: block;
   position: absolute;
   pointer-events: none;
   content: " ";
-
+  visibility: visible;
 
   width: 0.5em;
   height: 0.5em;

src/modules/transition.less

@@ -32,11 +32,20 @@
   -o-animation-duration: 1s;
   animation-duration: 1s;
 
+  animation-timing-function: ease;
+  -webkit-animation-timing-function: ease;
+
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
   -ms-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;
+  
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
 }
 
 /*******************************
@@ -197,6 +206,76 @@
 }
 
 
+/*--------------
+      Slide
+---------------*/
+
+.ui.slide.down.transition.in,
+.ui.slide.down.transition.out {
+  -webkit-animation-name: slide;
+  -moz-animation-name: slide;
+  -o-animation-name: slide;
+  animation-name: slide;
+  transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  -webkit-transform-origin: 50% 0%;
+}
+.ui.slide.up.transition.in,
+.ui.slide.up.transition.out {
+  -webkit-animation-name: slide;
+  -moz-animation-name: slide;
+  -o-animation-name: slide;
+  animation-name: slide;
+  transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  -webkit-transform-origin: 50% 100%;
+}
+
+.ui.slide.up.transition > *,
+.ui.slide.down.transition > * {
+  -webkit-animation-name: fade;
+  -moz-animation-name: fade;
+  -o-animation-name: fade;
+  animation-name: fade;
+  -webkit-animation-duration: 0.3s;
+  -moz-animation-duration: 0.3s;
+  -ms-animation-duration: 0.3s;
+  -o-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+}
+
+@-moz-keyframes slide {
+  0% {
+    opacity: 0;
+    -moz-transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: scaleY(1);
+  }
+}
+@-webkit-keyframes slide {
+  0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+  }
+}
+@keyframes slide {
+  0% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+
 /*******************************
        Animations
 *******************************/
@@ -206,6 +285,14 @@
 ---------------*/
 
 /* Flash */
+@-webkit-keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+  25%, 75% {
+    opacity: 0;
+  }
+}
 @-moz-keyframes flash {
   0%, 50%, 100% {
     opacity: 1;
@@ -395,46 +482,46 @@
 
 @-webkit-keyframes pulse {
   0% {
-    -webkit-transform: scale(1); 
+    -webkit-transform: scale(1);
   }
   50% {
-    -webkit-transform: scale(1.1); 
+    -webkit-transform: scale(1.1);
   }
   100% {
-    -webkit-transform: scale(1); 
+    -webkit-transform: scale(1);
   }
 }
 @-moz-keyframes pulse {
   0% {
-    -moz-transform: scale(1); 
+    -moz-transform: scale(1);
   }
   50% {
-    -moz-transform: scale(1.1); 
+    -moz-transform: scale(1.1);
   }
   100% {
-    -moz-transform: scale(1); 
+    -moz-transform: scale(1);
   }
 }
 @-o-keyframes pulse {
   0% {
-    -o-transform: scale(1); 
+    -o-transform: scale(1);
   }
   50% {
-    -o-transform: scale(1.1); 
+    -o-transform: scale(1.1);
   }
   100% {
-    -o-transform: scale(1); 
+    -o-transform: scale(1);
   }
 }
 @keyframes pulse {
   0% {
-    transform: scale(1); 
+    transform: scale(1);
   }
   50% {
-    transform: scale(1.1); 
+    transform: scale(1.1);
   }
   100% {
-    transform: scale(1); 
+    transform: scale(1);
   }
 }