Use css transition-duration in transitionEndEmulator

pvdlg · Jan 6, 2017 · 3af1b36 · 3af1b36
1 parent 65ffb1c
commit 3af1b36
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 20 deletions.
diff --git a/js/src/alert.js b/js/src/alert.js
@@ -23,7 +23,6 @@ const Alert = (($) => {
   const EVENT_KEY           = `.${DATA_KEY}`
   const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
-  const TRANSITION_DURATION = 150
 
   const Selector = {
     DISMISS : '[data-dismiss="alert"]'
@@ -118,7 +117,7 @@ const Alert = (($) => {
 
       $(element)
         .one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
-        .emulateTransitionEnd(TRANSITION_DURATION)
+        .emulateTransitionEnd()
     }
 
     _destroyElement(element) {

diff --git a/js/src/carousel.js b/js/src/carousel.js
@@ -23,7 +23,6 @@ const Carousel = (($) => {
   const EVENT_KEY           = `.${DATA_KEY}`
   const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
-  const TRANSITION_DURATION = 600
   const ARROW_LEFT_KEYCODE  = 37 // KeyboardEvent.which value for left arrow key
   const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key
 
@@ -380,7 +379,7 @@ const Carousel = (($) => {
             setTimeout(() => $(this._element).trigger(slidEvent), 0)
 
           })
-          .emulateTransitionEnd(TRANSITION_DURATION)
+          .emulateTransitionEnd()
 
       } else {
         $(activeElement).removeClass(ClassName.ACTIVE)

diff --git a/js/src/collapse.js b/js/src/collapse.js
@@ -23,7 +23,6 @@ const Collapse = (($) => {
   const EVENT_KEY           = `.${DATA_KEY}`
   const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
-  const TRANSITION_DURATION = 600
 
   const Default = {
     toggle : true,
@@ -190,7 +189,7 @@ const Collapse = (($) => {
 
       $(this._element)
         .one(Util.TRANSITION_END, complete)
-        .emulateTransitionEnd(TRANSITION_DURATION)
+        .emulateTransitionEnd()
 
       this._element.style[dimension] = `${this._element[scrollSize]}px`
     }
@@ -250,7 +249,7 @@ const Collapse = (($) => {
 
       $(this._element)
         .one(Util.TRANSITION_END, complete)
-        .emulateTransitionEnd(TRANSITION_DURATION)
+        .emulateTransitionEnd()
     }
 
     setTransitioning(isTransitioning) {

diff --git a/js/src/modal.js b/js/src/modal.js
@@ -23,8 +23,6 @@ const Modal = (($) => {
   const EVENT_KEY                    = `.${DATA_KEY}`
   const DATA_API_KEY                 = '.data-api'
   const JQUERY_NO_CONFLICT           = $.fn[NAME]
-  const TRANSITION_DURATION          = 300
-  const BACKDROP_TRANSITION_DURATION = 150
   const ESCAPE_KEYCODE               = 27 // KeyboardEvent.which value for Escape (Esc) key
 
   const Default = {
@@ -193,7 +191,7 @@ const Modal = (($) => {
       if (transition) {
         $(this._element)
           .one(Util.TRANSITION_END, (event) => this._hideModal(event))
-          .emulateTransitionEnd(TRANSITION_DURATION)
+          .emulateTransitionEnd()
       } else {
         this._hideModal()
       }
@@ -263,7 +261,7 @@ const Modal = (($) => {
       if (transition) {
         $(this._dialog)
           .one(Util.TRANSITION_END, transitionComplete)
-          .emulateTransitionEnd(TRANSITION_DURATION)
+          .emulateTransitionEnd()
       } else {
         transitionComplete()
       }
@@ -369,7 +367,7 @@ const Modal = (($) => {
 
         $(this._backdrop)
           .one(Util.TRANSITION_END, callback)
-          .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
+          .emulateTransitionEnd()
 
       } else if (!this._isShown && this._backdrop) {
         $(this._backdrop).removeClass(ClassName.SHOW)
@@ -385,7 +383,7 @@ const Modal = (($) => {
            $(this._element).hasClass(ClassName.FADE)) {
           $(this._backdrop)
             .one(Util.TRANSITION_END, callbackRemove)
-            .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
+            .emulateTransitionEnd()
         } else {
           callbackRemove()
         }

diff --git a/js/src/tab.js b/js/src/tab.js
@@ -23,7 +23,6 @@ const Tab = (($) => {
   const EVENT_KEY           = `.${DATA_KEY}`
   const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
-  const TRANSITION_DURATION = 150
 
   const Event = {
     HIDE           : `hide${EVENT_KEY}`,
@@ -168,7 +167,7 @@ const Tab = (($) => {
       if (active && isTransitioning) {
         $(active)
           .one(Util.TRANSITION_END, complete)
-          .emulateTransitionEnd(TRANSITION_DURATION)
+          .emulateTransitionEnd()
 
       } else {
         complete()

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
@@ -32,7 +32,6 @@ const Tooltip = (($) => {
   const DATA_KEY            = 'bs.tooltip'
   const EVENT_KEY           = `.${DATA_KEY}`
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
-  const TRANSITION_DURATION = 150
   const CLASS_PREFIX        = 'bs-tether'
 
   const Default = {
@@ -321,7 +320,7 @@ const Tooltip = (($) => {
           this._isTransitioning = true
           $(this.tip)
             .one(Util.TRANSITION_END, complete)
-            .emulateTransitionEnd(Tooltip._TRANSITION_DURATION)
+            .emulateTransitionEnd()
           return
         }
 
@@ -367,7 +366,7 @@ const Tooltip = (($) => {
         this._isTransitioning = true
         $(tip)
           .one(Util.TRANSITION_END, complete)
-          .emulateTransitionEnd(TRANSITION_DURATION)
+          .emulateTransitionEnd()
 
       } else {
         complete()

diff --git a/js/src/util.js b/js/src/util.js
@@ -18,6 +18,8 @@ const Util = (($) => {
 
   const MAX_UID = 1000000
 
+  const MILLIS = 1000
+
   const TransitionEndEvent = {
     WebkitTransition : 'webkitTransitionEnd',
     MozTransition    : 'transitionend',
@@ -65,9 +67,9 @@ const Util = (($) => {
     return false
   }
 
-  function transitionEndEmulator(duration) {
+  function transitionEndEmulator() {
     let called = false
-
+    const duration = this.length ? parseFloat(this.css('transition-duration') || this.css('-webkit-transition-duration') || this.css('-moz-transition-duration') || this.css('-ms-transition-duration') || this.css('-o-transition-duration') || 0) * MILLIS : 0
     $(this).one(Util.TRANSITION_END, () => {
       called = true
     })