No Transition on `router-view`

Penguinlay commented 3 years ago

Version

4.0.6

Reproduction link

https://codepen.io/SheinLinPhyo/pen/WNRKpMv

Steps to reproduce

Create a couple child components with router defined on them. Wrap and call router-view with transition:

    <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in" appear>
            <component :is="Component" />
        </transition>
    </router-view>

What is expected?

Transition is applied upon route switching.

What is actually happening?

No transition is applied. No console error during the development version.

In my project with the following dependencies, the behavior below is observed.

    "dependencies": {
        "@mdi/font": "5.9.55",
        "axios": "0.21.1",
        "markdown-it-link-attributes": "3.0.0",
        "roboto-fontface": "0.10.0",
        "vue": "3.0.11",
        "vue-axios": "3.2.4",
        "vue-i18n": "9.1.6",
        "vue-meta": "3.0.0-alpha.4",
        "vue-router": "4.0.6",
        "vue3-markdown-it": "1.0.8",
        "vuetify": "3.0.0-alpha.2",
        "vuex": "4.0.0"
    },
    "devDependencies": {
        "@intlify/vite-plugin-vue-i18n": "2.1.2",
        "@types/markdown-it-link-attributes": "3.0.0",
        "@vitejs/plugin-vue": "1.2.1",
        "@vue/compiler-sfc": "3.0.11",
        "pre-commit": "1.2.2",
        "prettier": "2.2.1",
        "sass": "1.32.8",
        "sass-loader": "10.1.1",
        "typescript": "4.3.0-dev.20210410",
        "vite": "2.0.0-beta.69",
        "vite-plugin-package-version": "0.0.4",
        "vue-cli-plugin-vuetify": "2.3.1",
        "vue-tsc": "0.0.22"
    }

With or without key, the following warning is shown in console for every route under router-view upon first render, and then one subsequently upon each route change:

backend.js:3229 Instance uid=0:22 not found
getComponentInstance        @ backend.js:3229
sendSelectedComponentData   @ backend.js:3174
(anonymous)                 @ backend.js:757
emit                        @ backend.js:3720
_emit                       @ backend.js:1126
(anonymous)                 @ backend.js:1058
(anonymous)                 @ backend.js:1058
listener                    @ backend.js:2105
postMessage (async)
o                           @ proxy.js:1

Penguinlay commented 3 years ago

In in-out, out gradually but in right away.

<router-view v-slot="{ Component }">
    <transition name="fade" mode="in-out" appear :duration="1000">
        <component :is="Component" />
    </transition>
</router-view>

In out-in, in and out right away after pausing for duration 1000.

<router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in" appear :duration="1000">
        <component :is="Component" />
    </transition>
</router-view>

Penguinlay commented 3 years ago

If CSS is manually defined as below:

.fade-enter, .fade-leave-active {
  opacity: 0
}

Fade in-out transition works.

https://codepen.io/OriginalEXE/pen/jrvgKE

Penguinlay commented 3 years ago

Based on chat Discord, it seems that manual styling is expected. I will close this issue for now.

vuejs / router