Vue router view transition

Author: realstoman

src/App.vue

@@ -4,7 +4,9 @@
 		<Header></Header>
 
 		<!-- Render Active Component Contents Start -->
-		<router-view />
+		<transition name="fade" mode="out-in">
+			<router-view :theme="appTheme" />
+		</transition>
 
 		<!-- Footer Start -->
 		<Footer></Footer>
@@ -42,4 +44,37 @@ export default {
 	-moz-osx-font-smoothing: grayscale;
 	text-align: center;
 }
+
+.fade-enter-active {
+	animation: coming 0.4s;
+	animation-delay: 0.2s;
+	opacity: 0;
+}
+
+.fade-leave-active {
+	animation: going 0.4s;
+}
+
+@keyframes going {
+	from {
+		transform: translateX(0);
+	}
+
+	to {
+		transform: translateX(-10px);
+		opacity: 0;
+	}
+}
+
+@keyframes coming {
+	from {
+		transform: translateX(-10px);
+		opacity: 0;
+	}
+
+	to {
+		transform: translateX(0px);
+		opacity: 1;
+	}
+}
 </style>