Vue.js page transition fade effect with vue-router
问题 How to achieve a fade effect page transition between vue-router defined pages (components)? 回答1: Wrap <router-view></router-view> with <transition name="fade"></transition> and add these styles: .fade-enter-active, .fade-leave-active { transition-property: opacity; transition-duration: .25s; } .fade-enter-active { transition-delay: .25s; } .fade-enter, .fade-leave-active { opacity: 0 } Detailed answer Assuming you have created your application with vue-cli, e.g.: vue init webpack