React CSS Transition 在退出时不触发

问题描述

我有一个显示照片的父组件 DocPhotos。单击照片后，会调用 PhotoZoomViewer 组件，该组件将照片呈现为模态。这种放大过渡效果很好。但是，单击照片后，会缩小，但退出转换无法应用。我正在使用 SCSS 模块。

这是我的 DocPhotos 组件和相关代码段：

const DocPhotos = ({ value: photos,onChange }) => {
  
  const [zoomPhotoUrl,setZoomPhotoUrl] = useState(null);

  const handlePhotoZoomEnter = photoUrl => {
    setZoomPhotoUrl(photoUrl);
  }

  const handlePhotoZoomExit = () => {
    setZoomPhotoUrl(null);
  }

return (
    <>
        {
          photos.map(photo => {
            const photoId = photo.id || photo.temp_id;
            return !photo._destroy && (
              <DocPhoto
                id={photoId}
                key={photoId}
                url={photo.url}
                onPhotoClick={() => handlePhotoZoomEnter(photo.url)}
              />
            );
          })
        }
      </div>
      <PhotoZoomViewer show={!!zoomPhotoUrl} photoUrl={zoomPhotoUrl} onExit={handlePhotoZoomExit} />
    </>
  );

以下是 PhotoZoomViewer 组件：

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

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

export default PhotoZoomViewer;

这是我的过渡 scss 文件：

.enter {
    opacity: 0;

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

}

.exit {
    opacity: 1;

    &Active{
        opacity: 0;
        transition: opacity 500ms ease-out;
    }
}

和样式 scss 模块：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）