Skip to content
GitLab
Open
Issue created by Administrator@rootContributor

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.

transition

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.