From 6327869106d5534431e9fc9473adb2af9a74669c Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 29 May 2018 14:31:55 +0800
Subject: [PATCH] perf[transition]: refine transition animation
---
src/styles/transition.scss | 16 +++++++++++++++-
src/views/layout/components/AppMain.vue | 2 +-
2 files changed, 16 insertions(+), 2 deletions(-)
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index 85c03286..04e16279 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -11,7 +11,21 @@
opacity: 0;
}
-/*fade*/
+/*fade-transform*/
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+ transition: all .5s;
+}
+.fade-transform-enter {
+ opacity: 0;
+ transform: translateX(-30px);
+}
+.fade-transform-leave-to {
+ opacity: 0;
+ transform: translateX(30px);
+}
+
+/*breadcrumb transition*/
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all .5s;
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
index 653d1810..8e10a9e5 100644
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -1,6 +1,6 @@
<template>
<section class="app-main" style="min-height: 100%">
- <transition name="fade" mode="out-in">
+ <transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>