Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Toast animation issue

See original GitHub issue

Describe the bug

When there are multiple toasts present, slide animations only work for the first item, and even then there’s a hitch in the animation. I made a demo that shows toasts side by side with a vanilla transition-group, with some instructions.

Demo https://codepen.io/cvn/pen/vYEKQdO

A difference with a vanilla transition-group is that when toasts are not animating, they keep a b-toaster-enter-to class. And after moving, they also keep a b-toaster-move class. Like the enter and move animations aren’t ever completing.

Ref #4473

Expected behavior

Toast move and leave animations should work for all toasts.

Versions

Libraries:

BootstrapVue: 2.1.0
Bootstrap: 4.4.1
Vue: 2.6.10

Environment:

OS: macOS Mojave
Browser: Chrome 78

Issue Analytics

State:
Created 4 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

jacobmllr95commented, Sep 4, 2020

The animation issues are caused by bugs in Vue.js transition-group implementation.

Theare open PR’s on GitHub which seem to fix the issues:

vuejs/vue#7901
vuejs/vue#7906

0reactions

stale[bot]commented, Dec 18, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!