Manage classes for CSS Transition
Created by: 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.