"show" class is added to modals too late

Describe the bug

When a modal is shown, it uses a transition, however at the moment isShow is set in onAfterEnter which doesn’t happen until the end of the transition. This means you get sequential transitions or a perceived delay, also the buttons which should show disabled during the transition are always enabled.

Steps to reproduce the bug

1. Extend the transition time of fade to make it easier to see
2. Trigger open of a modal
3. You will see the backdrop fade in
4. Then after that the show class is added and you see the modal show transition

Expected behavior

The show class needs to be added at the same point as a enter-to class would be added, i.e. the very next frame after enter.

Versions

Libraries:

• BootstrapVue: 2.4.1
• Bootstrap: 4.4.1
• Vue: 2.6.10

Fix

To solve the issue I changed the following here: https://github.com/bootstrap-vue/bootstrap-vue/blob/7a34f737be4825bfc1313463b13e2edb529f9a7c/src/components/modal/modal.js#L616

onEnter() {
    this.isBlock = true;
    window.requestAnimationFrame(() => {
        window.requestAnimationFrame(() => {
            this.isShow = true;
        });
    });
}

And also remove this.isShow = true; from onAfterEnter

Ideally I’d like to use nextFrame(() => {this.isShow = true;}) from the built in transition lib in Vue but I couldn’t see a way to import that definition. https://github.com/vuejs/vue/blob/4de4649d9637262a9b007720b59f80ac72a5620c/src/platforms/web/runtime/transition-util.js#L67

Demo link for problem and solution

https://codepen.io/sonicisthebest/pen/LYVGpvJ

[philipmountifield]

Sure I’ll take a look.

[jacobmllr95]

@philipmountifield Thanks for the research! Do you want’t to come up with a PR to add the second requestAF() in yourself?