fixed animate on init deprecating transitionEnd emulation #381

dist/css/bootstrap2/bootstrap-switch.css

@@ -48,6 +48,7 @@
 }
 .bootstrap-switch {
   display: inline-block;
+  direction: ltr;
   cursor: pointer;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -64,137 +65,13 @@
   -o-user-select: none;
   user-select: none;
   vertical-align: middle;
-  min-width: 100px;
   -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }
-.bootstrap-switch.bootstrap-switch-mini {
-  min-width: 71px;
-}
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
-  padding-bottom: 4px;
-  padding-top: 4px;
-  font-size: 10px;
-  line-height: 9px;
-}
-.bootstrap-switch.bootstrap-switch-small {
-  min-width: 79px;
-}
-.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
-  padding-bottom: 3px;
-  padding-top: 3px;
-  font-size: 12px;
-  line-height: 18px;
-}
-.bootstrap-switch.bootstrap-switch-large {
-  min-width: 120px;
-}
-.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
-  padding-bottom: 9px;
-  padding-top: 9px;
-  font-size: 16px;
-  line-height: normal;
-}
-.bootstrap-switch.bootstrap-switch-disabled,
-.bootstrap-switch.bootstrap-switch-readonly,
-.bootstrap-switch.bootstrap-switch-indeterminate {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-  cursor: default !important;
-}
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
-.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
-  cursor: default !important;
-}
-.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
-  -webkit-transition: margin-left 0.5s;
-  -moz-transition: margin-left 0.5s;
-  -o-transition: margin-left 0.5s;
-  transition: margin-left 0.5s;
-}
-.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
-  -webkit-border-top-left-radius: 0;
-  -moz-border-radius-topleft: 0;
-  border-top-left-radius: 0;
-  -webkit-border-bottom-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  border-bottom-left-radius: 0;
-  -webkit-border-top-right-radius: 4px;
-  -moz-border-radius-topright: 4px;
-  border-top-right-radius: 4px;
-  -webkit-border-bottom-right-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-  border-bottom-right-radius: 4px;
-}
-.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
-  -webkit-border-top-right-radius: 0;
-  -moz-border-radius-topright: 0;
-  border-top-right-radius: 0;
-  -webkit-border-bottom-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  border-bottom-right-radius: 0;
-  -webkit-border-top-left-radius: 4px;
-  -moz-border-radius-topleft: 4px;
-  border-top-left-radius: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-  -moz-border-radius-bottomleft: 4px;
-  border-bottom-left-radius: 4px;
-}
-.bootstrap-switch.bootstrap-switch-focused {
-  border-color: rgba(82, 168, 236, 0.8);
-  outline: 0;
-  outline: thin dotted \9;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
-  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
-}
-.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container,
-.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-container {
-  margin-left: 0%;
-}
-.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
-  -webkit-border-top-right-radius: 4px;
-  -moz-border-radius-topright: 4px;
-  border-top-right-radius: 4px;
-  -webkit-border-bottom-right-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-  border-bottom-right-radius: 4px;
-}
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container,
-.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-container {
-  margin-left: -50%;
-}
-.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
-.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
-  -webkit-border-top-left-radius: 4px;
-  -moz-border-radius-topleft: 4px;
-  border-top-left-radius: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-  -moz-border-radius-bottomleft: 4px;
-  border-bottom-left-radius: 4px;
-}
-.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-container {
-  margin-left: -25%;
-}
 .bootstrap-switch .bootstrap-switch-container {
   display: inline-block;
-  width: 150%;
   top: 0;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
@@ -213,8 +90,10 @@
   cursor: pointer;
   display: inline-block !important;
   height: 100%;
-  padding-bottom: 4px;
   padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
   font-size: 14px;
   line-height: 20px;
 }
@@ -222,7 +101,6 @@
 .bootstrap-switch .bootstrap-switch-handle-off {
   text-align: center;
   z-index: 1;
-  width: 33.333333333%;
 }
 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
@@ -469,7 +347,6 @@
   margin-top: -1px;
   margin-bottom: -1px;
   z-index: 100;
-  width: 33.333333333%;
   border-left: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
   color: #333333;
@@ -531,3 +408,111 @@
 .bootstrap-switch input[type='checkbox'].form-control {
   height: auto;
 }
+.bootstrap-switch.bootstrap-switch-mini {
+  min-width: 71px;
+}
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
+  padding: 3px 6px;
+  font-size: 10px;
+  line-height: 9px;
+}
+.bootstrap-switch.bootstrap-switch-small {
+  min-width: 79px;
+}
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
+  padding: 3px 6px;
+  font-size: 12px;
+  line-height: 18px;
+}
+.bootstrap-switch.bootstrap-switch-large {
+  min-width: 120px;
+}
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
+  padding: 9px 12px;
+  font-size: 16px;
+  line-height: normal;
+}
+.bootstrap-switch.bootstrap-switch-disabled,
+.bootstrap-switch.bootstrap-switch-readonly,
+.bootstrap-switch.bootstrap-switch-indeterminate {
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
+.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  cursor: default !important;
+}
+.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
+  -webkit-transition: margin-left 0.5s;
+  -moz-transition: margin-left 0.5s;
+  -o-transition: margin-left 0.5s;
+  transition: margin-left 0.5s;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
+  -webkit-border-top-left-radius: 0;
+  -moz-border-radius-topleft: 0;
+  border-top-left-radius: 0;
+  -webkit-border-bottom-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+  border-bottom-left-radius: 0;
+  -webkit-border-top-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  border-top-right-radius: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  border-bottom-right-radius: 4px;
+}
+.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
+  -webkit-border-top-right-radius: 0;
+  -moz-border-radius-topright: 0;
+  border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0;
+  -moz-border-radius-bottomright: 0;
+  border-bottom-right-radius: 0;
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
+  border-top-left-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  border-bottom-left-radius: 4px;
+}
+.bootstrap-switch.bootstrap-switch-focused {
+  border-color: rgba(82, 168, 236, 0.8);
+  outline: 0;
+  outline: thin dotted \9;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
+  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6);
+}
+.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+  -webkit-border-top-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  border-top-right-radius: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  border-bottom-right-radius: 4px;
+}
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
+.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+  -webkit-border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
+  border-top-left-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  border-bottom-left-radius: 4px;
+}

dist/js/bootstrap-switch.js

@@ -480,11 +480,9 @@
         if (!callback) {
           return;
         }
-        if ($.support.transition) {
-          return this.$container.one("bsTransitionEnd", callback).emulateTransitionEnd(500);
-        } else {
+        return setTimeout(function() {
           return callback();
-        }
+        }, 50);
       };
 
       BootstrapSwitch.prototype._elementHandlers = function() {

src/coffee/bootstrap-switch.coffee

@@ -352,12 +352,9 @@ do ($ = window.jQuery, window) ->
 
       return  unless callback
 
-      if $.support.transition
-        @$container
-        .one "bsTransitionEnd", callback
-        .emulateTransitionEnd 500
-      else
+      setTimeout ->
         callback()
+      , 50
 
     _elementHandlers: ->
       @$element.on

src/less/bootstrap2/bootstrap-switch.less

@@ -2,6 +2,7 @@
 
 .@{bootstrap-switch-base} {
   display: inline-block;
+  direction: ltr;
   cursor: pointer;
   .border-radius(5px);
   border: 1px solid;
@@ -12,17 +13,98 @@
   line-height: 8px;
   .user-select(none);
   vertical-align: middle;
-  min-width: 100px;
   .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
+  .@{bootstrap-switch-base}-container {
+    display: inline-block;
+    top: 0;
+    .border-radius(4px);
+    .translate3d(0, 0, 0);
+  }
+
+  .@{bootstrap-switch-base}-handle-on,
+  .@{bootstrap-switch-base}-handle-off,
+  .@{bootstrap-switch-base}-label {
+    .box-sizing(border-box);
+    cursor: pointer;
+    display: inline-block !important;
+    height: 100%;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .@{bootstrap-switch-base}-handle-on,
+  .@{bootstrap-switch-base}-handle-off {
+    text-align: center;
+    z-index: 1;
+
+    &.@{bootstrap-switch-base}-primary {
+      .buttonBackground(@btnPrimaryBackgroundHighlight, @btnPrimaryBackground);
+    }
+
+    &.@{bootstrap-switch-base}-info {
+      .buttonBackground(@btnInfoBackgroundHighlight, @btnInfoBackground);
+    }
+
+    &.@{bootstrap-switch-base}-success {
+      .buttonBackground(@btnSuccessBackgroundHighlight, @btnSuccessBackground);
+    }
+
+    &.@{bootstrap-switch-base}-warning {
+      .buttonBackground(@btnWarningBackgroundHighlight, @btnWarningBackground);
+    }
+
+    &.@{bootstrap-switch-base}-danger {
+      .buttonBackground(@btnDangerBackgroundHighlight, @btnDangerBackground);
+    }
+
+    &.@{bootstrap-switch-base}-default {
+      .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75));
+    }
+  }
+
+  .@{bootstrap-switch-base}-label {
+    text-align: center;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    z-index: 100;
+    border-left: 1px solid @btnBorder;
+    border-right: 1px solid @btnBorder;
+    .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);
+  }
+
+  .@{bootstrap-switch-base}-handle-on {
+    .border-left-radius(4px);
+  }
+
+  .@{bootstrap-switch-base}-handle-off {
+    .border-right-radius(4px);
+  }
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    .opacity(0);
+    z-index: -1;
+
+    &.form-control {
+      height: auto;
+    }
+  }
+
   &.@{bootstrap-switch-base}-mini {
     min-width: 71px;
 
     .@{bootstrap-switch-base}-handle-on,
     .@{bootstrap-switch-base}-handle-off,
     .@{bootstrap-switch-base}-label {
-      padding-bottom: 4px;
-      padding-top: 4px;
+      padding: 3px 6px;
       font-size: 10px;
       line-height: 9px;
     }
@@ -34,8 +116,7 @@
     .@{bootstrap-switch-base}-handle-on,
     .@{bootstrap-switch-base}-handle-off,
     .@{bootstrap-switch-base}-label {
-      padding-bottom: 3px;
-      padding-top: 3px;
+      padding: 3px 6px;
       font-size: 12px;
       line-height: 18px;
     }
@@ -47,8 +128,7 @@
     .@{bootstrap-switch-base}-handle-on,
     .@{bootstrap-switch-base}-handle-off,
     .@{bootstrap-switch-base}-label {
-      padding-bottom: 9px;
-      padding-top: 9px;
+      padding: 9px 12px;
       font-size: 16px;
       line-height: normal;
     }
@@ -57,12 +137,12 @@
   &.@{bootstrap-switch-base}-disabled,
   &.@{bootstrap-switch-base}-readonly,
   &.@{bootstrap-switch-base}-indeterminate {
-    .opacity(50);
     cursor: default !important;
 
     .@{bootstrap-switch-base}-handle-on,
     .@{bootstrap-switch-base}-handle-off,
     .@{bootstrap-switch-base}-label {
+      .opacity(50);
       cursor: default !important;
     }
   }
@@ -97,10 +177,6 @@
   &.@{bootstrap-switch-base}-on,
   &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-off {
 
-    .@{bootstrap-switch-base}-container {
-      margin-left: 0%;
-    }
-
     .@{bootstrap-switch-base}-label {
       .border-right-radius(4px);
     }
@@ -109,103 +185,8 @@
   &.@{bootstrap-switch-base}-off,
   &.@{bootstrap-switch-base}-inverse.@{bootstrap-switch-base}-on {
 
-    .@{bootstrap-switch-base}-container {
-      margin-left: -50%;
-    }
-
     .@{bootstrap-switch-base}-label {
       .border-left-radius(4px);
     }
   }
-
-  &.@{bootstrap-switch-base}-indeterminate {
-
-    .@{bootstrap-switch-base}-container {
-      margin-left: -25%;
-    }
-  }
-
-  .@{bootstrap-switch-base}-container {
-    display: inline-block;
-    width: 150%;
-    top: 0;
-    .border-radius(4px);
-    .translate3d(0, 0, 0);
-  }
-
-  .@{bootstrap-switch-base}-handle-on,
-  .@{bootstrap-switch-base}-handle-off,
-  .@{bootstrap-switch-base}-label {
-    .box-sizing(border-box);
-    cursor: pointer;
-    display: inline-block !important;
-    height: 100%;
-    padding-bottom: 4px;
-    padding-top: 4px;
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .@{bootstrap-switch-base}-handle-on,
-  .@{bootstrap-switch-base}-handle-off {
-    text-align: center;
-    z-index: 1;
-    width: 33.333333333%;
-
-    &.@{bootstrap-switch-base}-primary {
-      .buttonBackground(@btnPrimaryBackgroundHighlight, @btnPrimaryBackground);
-    }
-
-    &.@{bootstrap-switch-base}-info {
-      .buttonBackground(@btnInfoBackgroundHighlight, @btnInfoBackground);
-    }
-
-    &.@{bootstrap-switch-base}-success {
-      .buttonBackground(@btnSuccessBackgroundHighlight, @btnSuccessBackground);
-    }
-
-    &.@{bootstrap-switch-base}-warning {
-      .buttonBackground(@btnWarningBackgroundHighlight, @btnWarningBackground);
-    }
-
-    &.@{bootstrap-switch-base}-danger {
-      .buttonBackground(@btnDangerBackgroundHighlight, @btnDangerBackground);
-    }
-
-    &.@{bootstrap-switch-base}-default {
-      .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75));
-    }
-  }
-
-  .@{bootstrap-switch-base}-label {
-    text-align: center;
-    margin-top: -1px;
-    margin-bottom: -1px;
-    z-index: 100;
-    width: 33.333333333%;
-    border-left: 1px solid @btnBorder;
-    border-right: 1px solid @btnBorder;
-    .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);
-  }
-
-  .@{bootstrap-switch-base}-handle-on {
-    .border-left-radius(4px);
-  }
-
-  .@{bootstrap-switch-base}-handle-off {
-    .border-right-radius(4px);
-  }
-
-  input[type='radio'],
-  input[type='checkbox'] {
-    position: absolute !important;
-    top: 0;
-    left: 0;
-    .opacity(0);
-    z-index: -1;
-
-    &.form-control {
-      height: auto;
-    }
-  }
 }

test/bootstrap-switch.js

@@ -480,11 +480,9 @@
         if (!callback) {
           return;
         }
-        if ($.support.transition) {
-          return this.$container.one("bsTransitionEnd", callback).emulateTransitionEnd(500);
-        } else {
+        return setTimeout(function() {
           return callback();
-        }
+        }, 50);
       };
 
       BootstrapSwitch.prototype._elementHandlers = function() {