You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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 usingonBeforeUpdate
andonUpdated
in a custom component, yet I need these hooks attached toTransitionGroup
itself. It seems to me like adding Javascript hooksbefore-move
andmove
, andafter-move
would cover this nicely without the need to exposeTransitionGroup
'sonBeforeUpdate
andonUpdated
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 amove
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
, andafter-move
JavaScript hooks. It is perfectly inline with the design language ofTransition
component.Beta Was this translation helpful? Give feedback.
All reactions