CSSTransition 反应：只显示背景，不显示照片

Question

我有一个组件，当使用 CSSTransition 单击照片时会呈现该组件。它也有一个背景组件，但单击后仅显示背景。

如果我删除 CSSTransition，它就会按预期运行。

这是照片查看器组件：

import styles from './PhotoZoomViewer.module.scss';
import { CSSTransition } from 'react-transition-group';
import transitions from './PhotoZoomViewerTransition.module.scss';
import PhotoZoomBackdrop from './PhotoZoomBackdrop/PhotoZoomBackdrop';


const PhotoZoomViewer = ({ show, photoUrl, onExit}) =>  (
     <CSSTransition in={show} timeout={500} classNames={transitions} unmountOnExit>
         <PhotoZoomBackdrop show={show} />
        <div className={styles.photoZoomViewer}>
            <img className={styles.zoomedImage} src={photoUrl} alt={photoUrl} onClick={onExit} />
        </div>
    </CSSTransition>
);

export default PhotoZoomViewer;

这是 PhotoZoomViewer 的转换特定 SCSS：

.enter {
    opacity: 0;

    &Active {
        opacity: 1;
        transition: all 300ms ease-in-out;
    }

}

.exit {
    opacity: 1;

    &Active{
        opacity: 0;
        transition: all 300ms ease-in-out;
    }
}

这里是PhotoZoomViewer自己的SCSS：

.photoZoomViewer {
    z-index: 300;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: zoom-out;
}

这是 PhotoZoomBackdrop 组件：

import React from 'react';
import styles from './PhotoZoomBackdrop.module.scss';

const PhotoZoomBackdrop = ({show}) => (
    show && <div className={styles.backdrop}></div> 
);

export default PhotoZoomBackdrop;

这里是PhotoZoomBackdrop.module.scss：

.backdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

没有 CssTransition 组件背景和图像会显示，但 CSSTransition 背景会覆盖整个页面并且图像不会显示。

Answer 1

我不得不将 JSX 包含在 CSSTransition 中 div:

const PhotoZoomViewer = ({ show, photoUrl, onExit}) =>  (
     <CSSTransition in={show} timeout={500} classNames={transitions} unmountOnExit>
    <div>
         <PhotoZoomBackdrop show={show} />
        <div className={styles.photoZoomViewer}>
            <img className={styles.zoomedImage} src={photoUrl} alt={photoUrl} onClick={onExit} />
        </div>
    </div>
    </CSSTransition>
);

CSSTransition 反应：只显示背景，不显示照片

CSSTransition react: Only backdrop shown and photo not being displayed

javascript

sass

reactjs

reactcsstransitiongroup

css-modules