diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2018-02-19 12:10:25 +0300 |
---|---|---|
committer | Johann-S <johann.servoire@gmail.com> | 2018-02-19 12:10:25 +0300 |
commit | 3dd0bde664699fc7a191d0d3569f4f0ba8f06028 (patch) | |
tree | ff42d0fc35221dd53aede05d99491b4b812866bb /js | |
parent | c381d199655586d949a0929868bea889aed46fa8 (diff) |
Fix carousel transition duration (#25218)
Diffstat (limited to 'js')
-rw-r--r-- | js/src/carousel.js | 60 | ||||
-rw-r--r-- | js/tests/visual/carousel.html | 15 |
2 files changed, 53 insertions, 22 deletions
diff --git a/js/src/carousel.js b/js/src/carousel.js index 9d3be6f19d..4a64e7cc8f 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -15,16 +15,16 @@ const Carousel = (($) => { * ------------------------------------------------------------------------ */ - const NAME = 'carousel' - const VERSION = '4.0.0' - const DATA_KEY = 'bs.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 - const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch + const NAME = 'carousel' + const VERSION = '4.0.0' + const DATA_KEY = 'bs.carousel' + const EVENT_KEY = `.${DATA_KEY}` + const DATA_API_KEY = '.data-api' + const JQUERY_NO_CONFLICT = $.fn[NAME] + const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key + const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key + const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch + const MILLISECONDS_MULTIPLIER = 1000 const Default = { interval : 5000, @@ -89,18 +89,20 @@ const Carousel = (($) => { class Carousel { constructor(element, config) { - this._items = null - this._interval = null - this._activeElement = null + this._items = null + this._interval = null + this._activeElement = null - this._isPaused = false - this._isSliding = false + this._isPaused = false + this._isSliding = false - this.touchTimeout = null + this.touchTimeout = null - this._config = this._getConfig(config) - this._element = $(element)[0] - this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0] + this._config = this._getConfig(config) + this._element = $(element)[0] + this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0] + + this._transitionDuration = this._getTransitionDuration() this._addEventListeners() } @@ -223,6 +225,24 @@ const Carousel = (($) => { return config } + _getTransitionDuration() { + // Get transition-duration of first element in the carousel + let transitionDuration = $(this._element).find(Selector.ITEM).css('transition-duration') + + // Return 0 carousel item is not found + if (!transitionDuration) { + return 0 + } + + // If multiple durations are defined, take the first + transitionDuration = transitionDuration.split(',')[0] + + // Multiply by 1000 if transition-duration is defined in seconds + return transitionDuration.indexOf('ms') > -1 + ? parseFloat(transitionDuration) + : parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER + } + _addEventListeners() { if (this._config.keyboard) { $(this._element) @@ -398,7 +418,7 @@ const Carousel = (($) => { setTimeout(() => $(this._element).trigger(slidEvent), 0) }) - .emulateTransitionEnd(TRANSITION_DURATION) + .emulateTransitionEnd(this._transitionDuration) } else { $(activeElement).removeClass(ClassName.ACTIVE) $(nextElement).addClass(ClassName.ACTIVE) diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index f81dc951e7..e19272c2d0 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -5,12 +5,17 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css"> <title>Carousel</title> + <style> + .carousel-item { + transition: transform 2s ease, opacity .5s ease; + } + </style> </head> <body> <div class="container"> <h1>Carousel <small>Bootstrap Visual Test</small></h1> - <p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p> + <p>The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> @@ -46,9 +51,15 @@ <script> $(function() { + var t0, t1; + // Test to show that the carousel doesn't slide when the current tab isn't visible + // Test to show that transition-duration can be changed with css $('#carousel-example-generic').on('slid.bs.carousel', function(event) { - console.log('slid at ', event.timeStamp) + t1 = performance.now() + console.log('transition-duration took' + (t1 - t0) + 'ms, slid at ', event.timeStamp) + }).on('slide.bs.carousel', function() { + t0 = performance.now() }) }) </script> |