Skip to content

Component with Teleport root node inside <Transition> cannot be animated #13160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rick-hup opened this issue Apr 4, 2025 · 1 comment
Closed

Comments

@rick-hup
Copy link

rick-hup commented Apr 4, 2025

Vue version

3.5.13

Link to minimal reproduction

https://deploy-preview-6548--vue-sfc-playground.netlify.app/#eNqdVm1v2zYQ/is3dUOSIrKdqgUSzQ22Fv2wDVuLJRgwQMBASyeLDSUKJOWXBvnvO5KSLCmOPzSIAfHuuedeeHfSY/BrXc82DQZxsPwhDJPqT5kxAaksa1lhZWDLTQFpo40s+Te2EghaSKOBVRl8vLsDo1ilueGy0rOkCsPbpEqqpU4Vrw1oNE1NEk5syoDnzpUs4Ww2dyfr+6wHPILCHJ5aiFclVUrcxFXIrSd4b1HnORMaL8jX3Dvzjg2WtWAG6QSwXDXGyAp49j4JrH1YWoIkgF9SwdOHVtqxGtVgEtzekciHupx7AkdNdPd9rlCxEsm85XPe7N/SCWAT8nxI7j1KbU2GHl0OA3Mi6BKAVwWyDNVAR9oiuvV3AV67nJNkYD0f5e9FLiRfj/khAxKM0Ett9sI+JNX8NYFfw32BkEsh5JZXa3BqunaFwBojQ1bXgmMGRgIKLKlVtOsVZ3poikONYFtgBaZArmDDNV9xwc0euCaK9Vpg5ixXe/inwdlX20zg4/hXNpCyCpBpLvZAAe99VxIX+Hof/FkCzOixWvtICtTUsi54Rzm3Gc6cWUhBowpdsz3a+siapRRTDIufk+ppABTINhhSqqdhA75WQq1rGK9QXT7nmkI8ebjF1QM3oUspl6qMQadM4PnV7OqC/IFP9oiGIqFZcLcYXAb9dNnJnoyjH6hayVpTE2aYk/sv9nTuQrAdGsMHKSlUSu7p9JDZHrunFnADbCRd+Epm+76plxnfAKSCad31Qlgy/TAcGgsZI7aK+gvVeDSew/rajYBHoX5eJjhC2m3WTXOPoZKwRph+yCxo7GBOHtq1cMLpqBJHXbaIzqE9fr+7XEpqwNMOX8CAbQMXQguYaNtVOhVPb7YlCVt08Bzfb94fseTm/MytxbOL59Dbz38M9u8olpcLdPw8PI2fu8adbsPBPmzH1Pasn9Ba+lUTQ853mLmZ/BbyKsNdDDc3N9d+SmXtFwSAwNx0z1uemSKGq8XiJ3emdbguSNsLVix9WCvZVBl1t5AqBrVesfPFJbT/s3d+DWRc21UYg7Fv5cNmaGNrlxThI21Xp0UMd1U7YT6lMVeYohCOcIPKcNoxIRN8TaQlzzLna8g0WWBthtFiUe8cScnUmpMxnd2rwwlrlmW0o2N4Y8VRh32e/as8z71KKprFULGMN5rsOgu5C3XBMruyFlYK1/Sb1iyKBruzrRAT4sXq+MGHIvI5+RRoafd32kX39s3q5jqaWNspHhq2WU5fF+Nh8Qa5kIzaQdmu6OCDrW40VTvna3pByoo2u7NJAvu5xgWqz7X7EEuC2LNZHaUpt787mf3AoReRl6cFpg9H5F/1zsqS4IuiV6fa0PdJrzOUDhqv/nT3F+7ouVdSUo0g9Anl36ilaGyMHvaBLprCHuBctL+5r0Fqj3v9aWeQbqxNyn2hEfLJ4ZOAXm8fT6R+CDeavXV2VFGq4n/U15aTChjN3s2uouDpf9LalDE=

Steps to reproduce

Minimal reproduction

<!-- App.vue -->
<template>
  <button @click="showModal = true">Show Modal</button>
  <Transition name="modal">
    <Modal v-if="showModal" @close="showModal = false" />
  </Transition>
</template>

<!-- Modal.vue -->
<template>
  <Teleport to="body">  <!-- This is the root node -->
    <div class="modal-mask">
      <!-- modal content -->
    </div>
  </Teleport>
</template>

What is expected?

The transition effects should be applied to the modal when it appears/disappears.

What is actually happening?

  • Warning: "Component inside renders non-element root node that cannot be animated"
  • Transition effects are not applied because Modal component's root node is a Teleport instead of an actual DOM element

System Info

Any additional comments?

No response

@qp666
Copy link

qp666 commented Apr 9, 2025

If the page needs to be switched, and there is a comment in the root node of the transition, then the page will directly show a blank screen.And no warning will be thrown out!!!
This is very troublesome for the investigation of the problem.

@github-actions github-actions bot locked and limited conversation to collaborators Apr 24, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants