From a8accc1206b9d2d9ad7809a238a9b4b4566134af Mon Sep 17 00:00:00 2001
From: jack huang <hwguge6@gmail.com>
Date: Wed, 24 Jul 2019 14:59:55 +0800
Subject: [PATCH] animation finished

---
 src/common/fade/FadeAnimation.vue      | 16 ++++++++++++++++
 src/pages/detail/components/Banner.vue | 17 +++++++++++------
 2 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 src/common/fade/FadeAnimation.vue

diff --git a/src/common/fade/FadeAnimation.vue b/src/common/fade/FadeAnimation.vue
new file mode 100644
index 0000000..e5e14b3
--- /dev/null
+++ b/src/common/fade/FadeAnimation.vue
@@ -0,0 +1,16 @@
+<template>
+    <transition>
+      <slot></slot>
+    </transition>
+</template>
+<script>
+export default {
+    name: 'FadeAnimation'
+}
+</script>   
+<style lang="stylus" scoped>
+    .v-enter, .v-leave-to 
+      opacity: 0
+    .v-enter-active, .v-leave-active
+      transition: opacity .5s
+</style>
\ No newline at end of file
diff --git a/src/pages/detail/components/Banner.vue b/src/pages/detail/components/Banner.vue
index 542d857..ba9b642 100644
--- a/src/pages/detail/components/Banner.vue
+++ b/src/pages/detail/components/Banner.vue
@@ -10,15 +10,19 @@
           </div>
         </div>
       </div>
-      <common-gallery 
-      :imgs="bannerImgs" 
-      v-show="showGallery"
-      @close="handleGalleryClose"
-      ></common-gallery>
+      <fade-animation>
+        <common-gallery 
+        :imgs="bannerImgs" 
+        v-show="showGallery"
+        @close="handleGalleryClose"
+        >
+        </common-gallery>
+      </fade-animation>  
     </div>
 </template>
 <script>
 import CommonGallery from 'common/gallery/Gallery'
+import FadeAnimation from 'common/fade/FadeAnimation'
 export default {
     name: 'DetailBanner',
     props: {
@@ -40,7 +44,8 @@ export default {
       }
     },
     components: {
-      CommonGallery
+      CommonGallery,
+      FadeAnimation
     }
 }
 </script>