Carousel crossfade > Prevent the background to be shown when transitioning

[MartijnCuppens]

When the carousel is transitioning, the background is shown through the images. This PR prevents this from happening by disabling the transition of the carousel item that is fading out and raising the z-index of the carousel item that is fading in. I also needed to raise the z-index of the carousel controls, the indicators had a z-index which was high enough.

I had to add the transition-delay to the getTransitionDurationFromElement function to prevent the classes to be removed too soon. Not sure if we should rename this function to make this clear or not.

Issue:
https://getbootstrap.com/docs/4.1/components/carousel/#crossfade

Demo new carousel:
https://deploy-preview-27529--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/#crossfade

[midzer]

I can clearly experience an improved crossfade on your demo. Awesome, will definetly use it in some of my projects soonish. JS code looks flawlessly on first glance and CSS appears tidy, too.

[MartijnCuppens]

Thanks @midzer!

[Johann-S]

Works fine to me 👍

Can you add a unit test, which show we handle transition-delay too please ?

[XhmikosR]

So this is only added so that we get the value in JS?

[MartijnCuppens]

And to prevent the transition of the carousel item that is "fading out". We need this because otherwise the classes are removed immediately.

[XhmikosR]

Just wondering if we could use the transition shorthand, that's why I'm asking.

[MartijnCuppens]

I can use the shorthand to combine these lines indeed:
https://github.com/twbs/bootstrap/blob/9b3c66258997c10f8bdb1ea521ed64e3775da39d/scss/_carousel.scss#L100-L101
I'll look into that

But I'll still need the $carousel-transition-duration option as a separate variable.

[XhmikosR]

@MartijnCuppens so this seems to break on IE 10.

See for example https://travis-ci.org/twbs/bootstrap/jobs/448234618#L633