Skip to content

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

@paya-cz

Description

@paya-cz

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions