Skip to content

Route transitions are always played, even without using appear #2392

@NoelDeMartin

Description

@NoelDeMartin

Reproduction

https://play.vuejs.org/#eNqNVltv2zYU/iun6gA7WCS5btcHTXXTFcWyYZeiDfYy7YGWji02EqmRlOPA8H/fIambXacYijTiuXznOxce5hDUjIvoiw6SgNeNVAYOkCtkBt81DRxho2QNs12Ls0x0Bkq2BlWniWJ/HNXWr9expom8byYG1Dn9XGUCIGo1zr27P9eyFWY+e05us6vgOujciVtqsG4q8l9Zw7R8sbrFqpI22LM0pqMTN+4XfWijpNiu3rdKoegYQ8NMmaRxp4PDAb5zimjTVtVHUsLx6GBij5MKtusBPzmWv3FxD0a+yYI4C1Y/S/qGW1ljGo/6Jz3YmiSD2zt7+sovjfuYqe3LKdZfHB9gF+pKGsI7wHtJBRc2vyPBelMyfhaGcFcirNstcA0bvscCWs3FFkxJAi60QVZck4EBbmYahKSPusaCU4GrR5DrHZethjA8RU3vFBOaGy4F8eAbYjFwyAIQrEYSbViBdKplYU/EPOSC+J2gTYC+7dV7kE8+pJtwfRY6HqHjEbsvX1dlW7+uyl1x03gyVjRvfhYv3obfsZbq8ZZrQ7+uO6HHnd6ScLgNw32wA+Ja11+KXtDdjP7a2IE4sRsk4xWS1Ds/zRrewN82mYOfa5jFM6LV1yQZwx6vT83cHJ7ajrGt8T9noRSFmuY7P1hAGiVbiuRSfeZXLqYnSp9Hut6ZwL1LtMANa6sem6o+rYe96jpXvDHUkTMHF7ZGU8pCJ/4EsJV30tGfX/UicHMe+cutoqbV5bxP2+0Z6Gpi/6cbTyuhj0iH00VT8GEFlMtVz5Q2zrIX0y0yNMY3ecXzexrLgdD5VfeG3QB63Mn8UR1O+j0WAjSa1m6kcSKpc5RacXk9H+iy+05dD19PzuhZmwf7ORVqopuorKbXaWQqL+14dIz8aGxx0g1F7JXwMNG/LarHqHN7+xZmRKLvBqU595rR13dQIdUox/kBnD/1vo98BDtahOBn7P93cqj1tJUVW2M1bJLPLkQCKReUGy08u5uqyCheU5s9Abux2L5CsTUlCZeLYWWl8Yh2ud2+XWHNGlo4UlDDXdZZp9BZMAx5Foxts+IsKI1pdBLHrWjutxGVPx4tbl5FL6MFxdRmIo1Q1+FayQftNlwWuKJb7BsyigvcGSkrHbKGPxXiK8Ob19Hr6EVc8XVM6DEXBe4ddt8TStNompUN354laSeGV6j+bOymPk2W0cv+8KuTGdXiQDQvMb+/IP+i957yR4WU3Y4ekkFnmKJx9OoPn//APX0PSupoW5H1N5SfUMuqtRy92U+tKIj2xM6x/cX1jN7YO/1hb5AeoC4pS3SccddI+3A9lfpI92X0alJFbR4r1FGu7dNEfyNc09xx4f3WUhWoElg2eyCyvIDni8XiR7ctCY6LcC1p9dQJvFg0eydvWFEQ2UFCUTJBsLACBt/Tj9+13rvCDb0RU8tyOY08wo8E8jyfEEhgQf+WE4TIvvchPT7kznLDd7abXlgh22En9GHM8KInIBuWc/MIi+gHDcg0XkK0q+4Mj/aww+r8iZF1DI7/AQj3tSs=

Steps to reproduce the bug

Load the playground page, and notice how the initial route fades in.

Expected behavior

Since I'm not using the appear property in the transition, I didn't expect the initial route to animate.

Actual behavior

The initial page fades in, it shouldn't play the animation given that I'm not using appear in the transition.

Additional information

I have investigated this issue, and I could see why the bug is happening. The first time the page is loaded, the Component provided in the v-slot of the RouterView is undefined, so the Transition component is loaded without any component first. Then, the route component is loaded and the enter transition is triggered.

Keeping that in mind, this issue can be fixed doing the following (adding v-if="Component" to the example in the docs):

<router-view v-slot="{ Component }">
  <transition v-if="Component" name="fade">
    <component :is="Component" />
  </transition>
</router-view>

However, I think it's very unintuitive. Maybe the RouterView component should avoid rendering anything inside of the slot until the router bootstrapping has been completed?

Otherwise, if you don't think this is a bug, I think we should at least add a warning note in the documentation mentioning this (I can open a PR myself if you want).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions