<template> <div id="app"> <transition name="fade"> <router-view class="child-view"/> </transition> </div> </template> <script> export default { name: 'App', } </script> <style> #app { font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; } html,body,#app{ height: 100%; } *{ margin: auto; padding: auto; } .child-view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all .5s; } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style>