Invalid transition used by Teleport
Version
3.2.31
Reproduction link
Steps to reproduce
Click the button to trigger the animation.
What is expected?
Teleport target location triggers animation.
What is actually happening?
Transition has no animation around the teleport source or teleport target.
Yeah that's quite logical as you 1.) Move the content out of the source context so it's not part of the source's transition anymore, and 2) the teleported content is mounted into an existing element which won't trigger the transition wrapping that element.
From the DOM element analysis of the first animation, the sub elements or sub components are removed from the DOM only when the animation of the source context is completed.
From the DOM element analysis of the third animation,'teleport' is deleted directly, while other elements are not affected.
The 'teleport'is also a sub component and should follow the above logic.
From the DOM element analysis of the third animation,'teleport' is deleted directly, while other elements are not affected.
The teleport can't be aware that you mounted its content into a transition context.
Thank you for your answer. Do you have any good suggestions for the following scenarios?
Actual scenario: sfc.vuejs.org/
When the 'son' component disappears, the 'target-container' is hidden synchronously, but its internal 'teleport' disappears directly, which feels very abrupt.