Browse Source

fix: overlay switch style

MinJieLiu 5 years ago
parent
commit
05835dd102
3 changed files with 13 additions and 5 deletions
  1. 1 1
      package.json
  2. 5 3
      src/PhotoSlider.less
  3. 7 1
      src/PhotoSlider.tsx

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-photo-view",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "一款精致的 React 的图片预览组件",
   "author": "MinJieLiu",
   "license": "MIT",

+ 5 - 3
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;
     }
   }
 

+ 7 - 1
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()}
               >