mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-26 21:39:08 +02:00
Code Issues Releases Wiki Activity

Variable transition durations (#25662)

Browse Source
This commit is contained in:
Martijn Cuppens
2018-03-13 09:59:20 +01:00
committed by Johann-S
parent 1859595cb6
commit 1fadad1c33
11 changed files with 168 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
js/src/carousel.js
View File

@@ -15,16 +15,15 @@ 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 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 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 Default = {
interval : 5000,
@@ -102,8 +101,6 @@ const Carousel = (($) => {
this._element = $(element)[0]
this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0]
this._transitionDuration = this._getTransitionDuration()
this._addEventListeners()
}
@@ -225,24 +222,6 @@ 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)
@@ -406,6 +385,8 @@ const Carousel = (($) => {
$(activeElement).addClass(directionalClassName)
$(nextElement).addClass(directionalClassName)
const transitionDuration = Util.getTransitionDurationFromElement(activeElement)
$(activeElement)
.one(Util.TRANSITION_END, () => {
$(nextElement)
@@ -418,7 +399,7 @@ const Carousel = (($) => {
setTimeout(() => $(this._element).trigger(slidEvent), 0)
})
.emulateTransitionEnd(this._transitionDuration)
.emulateTransitionEnd(transitionDuration)
} else {
$(activeElement).removeClass(ClassName.ACTIVE)
$(nextElement).addClass(ClassName.ACTIVE)