- [新增] 添加基础动画事件

montage-f · Sep 29, 2019 · bd1ffb1 · bd1ffb1
1 parent f12e50c
commit bd1ffb1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/components/common/Fade/index.vue b/src/components/common/Fade/index.vue
@@ -1,8 +1,8 @@
 /**Created by montage_fz on 2019-09-29**/
 <template>
-    <div class="Fade">
-
-    </div>
+    <transition>
+        <slot></slot>
+    </transition>
 </template>
 
 <script>
@@ -20,6 +20,11 @@
 </script>
 
 <style scoped lang="less">
-    .Fade {
+    .v-enter, .v-leave-to {
+        opacity: 0;
+    }
+
+    .v-enter-active, .v-leave-active {
+        transition: opacity 0.5s;
     }
 </style>
diff --git a/src/views/Detail/components/Banner.vue b/src/views/Detail/components/Banner.vue
@@ -17,21 +17,26 @@
                 </div>
             </div>
         </div>
-        <Gallery
-            v-if="showGallery"
-            :imgs="imgs"
-            @closeGallery="closeGallery"
-        ></Gallery>
+        <FadeAnimation>
+            <Gallery
+                v-if="showGallery"
+                :imgs="imgs"
+                @closeGallery="closeGallery"
+            ></Gallery>
+        </FadeAnimation>
+
     </div>
 </template>
 
 <script>
     import Gallery from '@/components/common/Gallery';
+    import FadeAnimation from '@/components/common/Fade';
 
     export default {
         name: 'Banner',
         components: {
             Gallery,
+            FadeAnimation,
         },
         data() {
             return {