animation finished

niusz · Jul 24, 2019 · a8accc1 · a8accc1
1 parent 72e81e7
commit a8accc1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/src/common/fade/FadeAnimation.vue 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>
diff --git 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>