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

问题描述

我有一个组件，当使用 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.2);
}

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

解决方法

我不得不将 JSX 放在 div 内的 CSSTransition 中：

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>
);