animation final

src/commom/fade/FadeAnimation.vue

@@ -0,0 +1,16 @@
+<template>
+  <transition><slot></slot></transition>
+</template>
+
+<script>
+export default {
+  name: "Fade"
+};
+</script>
+
+<style lang="stylus" scoped>
+.v-enter, .v-leave-to
+  opacity: 0
+.v-enter-active, .v-leave-active
+  transition: opacity .5s
+</style>

src/pages/detail/components/banner.vue

@@ -10,16 +10,19 @@
         </div>
       </div>
     </div>
-    <commit-gallery
-      :imgs="gallaryImgs"
-      v-show="showGallery"
-      @close="handleGalleryClose"
-    ></commit-gallery>
+    <fade-animation>
+      <commit-gallery
+        :imgs="gallaryImgs"
+        v-show="showGallery"
+        @close="handleGalleryClose"
+      ></commit-gallery>
+    </fade-animation>
   </div>
 </template>
 
 <script>
 import CommitGallery from "commom/gallery/Gallery";
+import FadeAnimation from "commom/fade/FadeAnimation";
 
 export default {
   name: "DetailBanner",
@@ -34,7 +37,8 @@ export default {
     }
   },
   components: {
-    CommitGallery: CommitGallery
+    CommitGallery: CommitGallery,
+    FadeAnimation: FadeAnimation
   },
   methods: {
     handleBannerClick: function() {