Modal backdrop is not getting the .show and .fade classes applied

Describe the bug

Modal backdrop is opaque because it is not getting the .show and .fade classed applied

Steps to reproduce the bug

1. Create a modal assigned to a button using its id
2. Click on the button
3. See Error

Expected behavior

Backdrop to be transparent

Versions

Libraries:

• BootstrapVue: 2.0.0-rc.22
• Bootstrap: 4.2.1
• Vue: 2.6.8

[tmorehouse]

In docs, the backdrop is transparent:

See answer at https://github.com/bootstrap-vue/bootstrap-vue/issues/3400#issuecomment-498278454

Since we are using new re-usable transitions (to reduce codebase size), and Bootstrap V4.x transition styles are not truly compatible with how Vue handles transitions, not without a lot of extra JS hooks on the transition (see issue https://github.com/vuejs/vue/issues/9986) just to keep the show class on the element when the initial transition happens.

The fade and show classes are only applied during the transition (fade is applied on transition v-enter-active and v-leave-active, and show on v-enter-to and v-leave… see https://vuejs.org/v2/guide/transitions.html#Transition-Classes

Also, please upgrade Bootstrap to V4.3.1 for the latest CSS. and make sure you are loading BootstrapVue CSS after Bootstrap V4.3.1 CSS

[tmorehouse]

We’e simplified the SCSS from above to:

.modal-backdrop {
  opacity: $modal-backdrop-opacity;
}

The .modal has issues due to two transitions happening as the same time with two different durations: the fade transition, and the transform transition that slides the modal down… which has a longer duration. Using a single transition component would cause the slide down transition to abruptly stop once the fade transition ends. We hae tried to merge the transitions into a single transition but it just doesn’t work with Bootstrap’s SCSS/CSS.

The code needed to keep the show class active after the initial transition involves keeping data state of the transition stages, adding in requestAnimationFrame timeouts to add/remove the show class, and exit handlers to detect when the show class needs to be removed (as long as the transition isn’t cancelled). It is a lot more than just one or two lines of code (I know, I wrote a good chunk of the original code). Now double that due to the .modal having one (well two transitions), and the .modal-backdrop having a transition (which could be a different duration that modal’s fade, as they are separately configurable with SCSS variables).

modal fade show d-block was more of a hack / bandaid fix to get modal working, than using the above one line of SCSS to simplify the modal backdrop transition.

Also note, the backdrop and modal are not nested inside a same transitional component. they are two distinct entities, with possibly two distinct transition durations. Vue’s transition handler can only pick out the transition duration on the root element in the transition, not nested elements (which the modal slide transition is).