[WIP] Flexible CSS transition control

[ysds]

This is an experimental PR for #28968.

This allows more control over CSS classes to achieve flexible CSS Transitions. The following GIF shows two transition patterns:

• fade-xxx classes: fadeIn/Out
• slide-down-xxx classes: slideDown/Up

Also you can use your custom transition name (my-custom-transition-xxxx)

Demo: https://codepen.io/anon/pen/dxYqYz?editors=1111

• Dropdown
• Modal
• Popover
• Toast
• Tooltip
• Unit test

[Johann-S]

Nice work! very interesting @ysds 👍

[ysds]

Added a demo to the PR's description 😄

[mdo]

Big fan of abstracting the transitions. I've long wanted to add more transitions to different elements (grow or scale, slide in different directions, etc).

[MartijnCuppens]

@ysds, any progress on this?

[ysds]

I need help from @twbs/js-review because I'm not expert about JavaScript to apply this change to all components and the related tests correctly. It would be great if anyone could take over this PR.

And what I am wondering is to use a common class (e.g. fade-enter) or a component-specific class (e.g. modal-enter) as the default transition class name.

[MartijnCuppens]

And what I am wondering is to use a common class (e.g. fade-enter) or a component-specific class (e.g. modal-enter) as the default transition class name.

The common classes feel like a better idea, these classes can than be used by multiple components.

[mdo]

Closing as stale.