Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/bootstrap-vue/bootstrap-vue/issues/4761 below:

"show" class is added to modals too late · Issue #4761 · bootstrap-vue/bootstrap-vue · GitHub

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.

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

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.

Libraries:

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

To solve the issue I changed the following here:

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4