Fixed issue with multiple CSS transitions

[tdolsen]

Fixed an issue with the transitions of the carousel, which failed to apply the next, prev, left and right classes when more than one CSS transition was set. This was due to multiple durations being returned as a comma-separated list (e.g. ".6s, 2s") which slice(0, 1) * 1000 would turn into a NaN.

The fix adds another function, findDuration, to the emulateTransitionEnd flow, which returns the highest duration in the comma-separated list as milliseconds. The function won't interfere with existing uses, as integers are ignored.

[fat]

@tdolsen thanks for the pr

i think if we want to go this route (which seems reasonable), this should be applied across all plugins that use .emulateTransitionEnd… that way we're more consistent internally.

why $active.css('transition-duration').slice(0, -1) * 1000 (only used here) was ever merged… is beyond me :/

[cvrebert]

@fat It backtraces to #11416, which unfortunately didn't get a review by you.

[fat]

@cvrebert it's ok, that's my bad… I was pretty absent.

I think the idea is good, just want to see it propagated across the other plugins in a consistent way 👍

[mdo]

My bad yo—I don't even recall merging that O_O.

[cvrebert]

Competing pull request: #13602

[Harris-Miller]

Hey guys, I discovered something important that you guys should know after I closed #13602, it pertains to how this pull request effects the flow of emulateTransitionEnd()

.class-name {
  transition: width 0.7s, height 1.0s;
}

the event transitionend will fire twice, once for height, once for width. They way that you have

$el.one($.support.transition, function() { ... }).emulateTransitionEnd(300)

will not work properly with multiple transitions when those transitions have different durations. the callback will always fire on the shortest one, and 'called' in emulateTransitionEnd will be set on that first transitionEnd as well. In your current implementation of this, this pull-request is mute (sorry @tdolsen)

the way I found around this is:

var longestTransition = someFuncToDetermineThat($el)
$el.on($.support.transition.end, function(e, isEmulate) {
  if (e.originalEvent.propertyname !== longestTransition && !isEmulate) return
  else {
    // code here
    $el.off($.support.transition.end)
  }
}).emulateTransitionEnd(300)

and of course emulateTransitionEnd would have to be adjusted as well, the manual trigger would have to be

.trigger($.support.transition.end, true)

and you'd have to do the same .one to .on w/ .off inside the call back

I hope that helps. If I get the time I'll apply this to #13602 and re-open.

[fat]

I'm kinda thinking that transition duration should be constants set on the constructor. This way we dont have to rely on trying to parse css rules, and in the rare case that someone wants to much with the transition defaults we set in our lib in the css, they have a clear path to updating the values in the js too

[fat]

given that, i'm going to close this issue for now in favor of this issue: #13656