Manage classes for CSS Transition

[ysds]

Currently there is no much customizable or consistency in controlling the show / hide animation of components.

For example, modals allow control CSS Transition only in the show class. toasts has show / hide / showing status but there is no hiding. It is impossible to add a hide animation to dropdowns.

I have the impression that the current toast fade-in animation is not noticeable to users, so it is difficult to notice the notification. Typical OS’s notification UIs are not only fade-in/out, but also slide-in/out. However, customizing toast animations of Bootstrap is not clear.

I propose to be able to control CSS Transition like React and Vue and to allow users to customize the show / hide animation of Bootstrap components.

These class names are an example:

• .modal.show: same as v-enter
• .modal.showing: same as v-enter-active
• .modal.shown: same as v-enter-to
• .modal.hide: same as v-leave
• .modal.hiding: same as v-leave-enter
• .modal.hidden: same as v-leave-to

There may be more appropriate names. The suggestion here is to make CSS Transition more customizable.

[mdo]

Relabelling for v6 since we didn't get this into v5 and it requires breaking changes. I'm into the concept though—consistent transition classes for our components would be a good improvement.