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.

[VividLemon]

This is one of the larger issues we have when trying to implement https://github.com/bootstrap-vue-next/bootstrap-vue-next . Rather than classes operating independently to perform the animation effect,

such as if one was to use animate.css

    enter-active-class="animate__animated animate__tada"
    leave-active-class="animate__animated animate__bounceOutRight"

A lot of components animations are tied with the state of secondary classes, usually show. Having show isn't an issue in itself, but when show influences other classes, things start to get messy. As typically we handle displaying the values at specific times, say if we're implementing lazy rendering. The timing of when classes are applied vs Vue's rendering lifecycle can cause issues like flashing.

In addition, the widespread and fragmented experience of using transitions in bootstrap means that you can't easily apply customization to transitions, say if you wanted to add a delay. Another smaller issue is that if we wanted to use Vue's Transition component, there exists a long standing bug where duplicate classes in Transition and static applied classes, the static applied class would be removed. Meaning: if you need show to appear when the transition of fade is being applied, and then need it after the transition has finished, we need to do some very specific timing and dom manipulation to apply show. Which, usually results in a flash of content.

Lastly, it would make things a lot easier for managing state if we were able to consume typical Transition events, (@after-leave, @before-enter), which allows us to perform side effects based on timing