App.vue 代碼

<template> <div id="app"> <Header></Header> // 用transition 把切換組件頁面的容器包含 <transition name="slide-fade">  <router-view></router-view> </transition> </div></template><script>import Header from './components/header'export default { name: 'app', components: {Header},}</script>// 動畫<style scoped>.slide-fade{ position: absolute;left:0;right: 0;}.slide-fade-enter-active { transition: all 1.2s ease;}.slide-fade-leave-active { transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);}.slide-fade-enter, .slide-fade-leave-to{ left:0;right: 0; transform: translateX(50px); opacity: 0;}</style>

以上這篇Vue-router 切換組件頁面時進入進出動畫方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。