Toast animation issue

[cvn]

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

[tmorehouse]

The sticky transition classes is an issue with the interaction with portal-vue and the transition-group and transition components, which we tried to figure out a workaround, but couldn't

[cvn]

Crumbs

[tmorehouse]

We might have to remove the individual transition component from the toasts (when present in a toaster), and just rely on the transition group of the toaster, but then we would loose the ability to rely on the individual toast transition event handlers. Unless we can find an easy way to have the toast subscribe to the enter/leave transition hooks of the parent toaster (and filter based on the toast's root element).. this is assuming the transition-group component works correctly with portalled content.

[jacobmllr95]

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:

• fix(transition-group): ensure remove class v-enter-to after it was added vuejs/vue#7901
• fix(transition-group): not add class v-move to v-show element vuejs/vue#7906

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

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!