fix: overlay switch style

MinJieLiu · Apr 25, 2020 · 05835dd · 05835dd
1 parent 20f4f80
commit 05835dd
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-photo-view",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "一款精致的 React 的图片预览组件",
   "author": "MinJieLiu",
   "license": "MIT",

diff --git a/src/PhotoSlider.less b/src/PhotoSlider.less
@@ -14,10 +14,12 @@
     .PhotoView-PhotoSlider__ArrowRight,
     .PhotoView-PhotoSlider__FooterWrap {
       opacity: 0;
+    }
+  }
 
-      &:hover {
-        opacity: 0;
-      }
+  &-PhotoSlider__willClose {
+    .PhotoView-PhotoSlider__BannerWrap:hover {
+      opacity: 0;
     }
   }
 

diff --git a/src/PhotoSlider.tsx b/src/PhotoSlider.tsx
@@ -328,7 +328,13 @@ export default class PhotoSlider extends React.Component<IPhotoSliderProps, Phot
 
             return (
               <SlideWrap
-                className={classNames({ 'PhotoView-PhotoSlider__clean': !visible }, className)}
+                className={classNames(
+                  {
+                    'PhotoView-PhotoSlider__clean': !currentOverlayVisible,
+                    'PhotoView-PhotoSlider__willClose': !visible,
+                  },
+                  className,
+                )}
                 role="dialog"
                 onClick={e => e.stopPropagation()}
               >