Vue adds a cutscene animation fade-in and fade-out effect to the route. The component fades out when it is removed, but when it is entered, it enters instantly and does not fade in. Between these two steps, the page will become blank. The following is my code, copied from the official website:
<template>
<p id="app">
<transition name="fade">
<router-view></router-view>
</transition>
</p>
</template>
.fade-enter-active, .fade-leave-active {
transition: opacity .3s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
請問要怎么做才可以在當(dāng)前組件淡出的同時(shí),將要被插入的組件能淡入。
.fade-enter-active, .fade-leave-active {
opacity: 1;
transition: opacity .3s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
or:
.fade-enter-active, .fade-leave-active {
opacity: 1;
transition: opacity .3s
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
opacity: 1;
transition: opacity .3s
}
.fade-enter, .fade-leave {
opacity: 0
}