Subscribe on changes!

TransitionGroup should have before-move, move and after-move Javascript hooks

avatar
Apr 27th 2022

What problem does this feature solve?

I am using custom JavaScript to animate elements within a flexbox. I need to use TransitionGroup to properly animate entering/leaving elements. I have my own custom JS code to animate shuffle/reordering of existing elements when new elements enter (or old elements leave). To properly animate this, I need a way to get element positions before the DOM is updated, and element positions right after the DOM is updated. This would be easily solvable using onBeforeUpdate and onUpdated in a custom component, yet I need these hooks attached to TransitionGroup itself. It seems to me like adding Javascript hooks before-move and move, and after-move would cover this nicely without the need to expose TransitionGroup's onBeforeUpdate and onUpdated to external context.

What does the proposed API look like?

There are already lots of JavaScript hooks for Transition: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks

TransitionGroup added a move class, yet it didn't add any new hooks: https://vuejs.org/guide/built-ins/transition-group.html#move-transitions

My suggestion is to simply add before-move, move, and after-move JavaScript hooks. It is perfectly inline with the design language of Transition component.