TransitionGroup should have before-move, move and after-move Javascript hooks
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.