来自 react-transition-group 的 CSSTransition 不退出答案

【问题标题】：CSSTransition from react-transition-group does not exit来自 react-transition-group 的 CSSTransition 不退出
【发布时间】：2020-09-25 20:43:38
【问题描述】：

尝试使用 CSSTransiction 组件。我需要显示一个使用 css 类进行动画处理的面板。第一个类定义主要位置，第二个定义面板打开时的位置（顶部：0）。

显示有效，但退出无效。 onEntered 会触发，onExied 不会。

CSSTransition 组件缺乏文档，我尝试了不同的组合，但没有成功。有什么想法吗？

CSS：

.getSecondLevelPanel{
    position: fixed;
    left: 450px;
    top: -100%;
    height: 100%;
    width: 400px;
    transition: all 250ms ease-out;
}

.getSecondLevelPanelOpened {
    top: 0;
}

反应组件：

import * as React from 'react';
import { CSSTransition } from 'react-transition-group';

export interface Props {
    isVisible: Boolean;
    children: React.ReactChild;
    onClose: () => void;
}

const SecondLevelPanel = (props: Props) => {
  return (
    <CSSTransition
        timeout={{
            enter: 0,
            exit: 500
        }}
        in={props.isVisible}
        appear={true}
        enter={true}
        exit={true}
        classNames={{
            appear: 'getSecondLevelPanel',
            enterDone: 'getSecondLevelPanel getSecondLevelPanelOpened',
            exit: 'getSecondLevelPanel'
        }}
        unmountOnExit={true}
        onEntered={() => {
            alert('entered');
        }}
        onExited={() => {
            alert('exited');
        }}
    >
        <div>
            <a onClick={() => props.onClose()}>Close</a>
            {props.children}
        </div>
    </CSSTransition>
  );
};

export default SecondLevelPanel;

【问题讨论】：

嘿，我也遇到了同样的问题，你找到解决办法了吗？
其实没有，抱歉。如果您在找到解决方案时发布解决方案，我们将不胜感激。

标签： reactjs css-transitions css-animations react-transition-group

【解决方案1】：

问题在于您的 CSS 和 classNames 道具。 CSSTransition 组件像这样应用类。

只要 in 属性设置为 true，就会添加 appear 和 enter 类。
appear-active 和 enter-active 是在设置 appear 和 enter 类之后添加的。
appear-done 和 enter-done 在 timeout 中设置的持续时间经过后添加。
exit 类在 in 属性设置为 false 之后重复步骤 1-3。

您的退出调用不起作用的原因可能是仅设置了一个退出类并将0 设置为您的输入持续时间。尝试在 active 类上设置过渡规则，以确保在整个过渡期间设置过渡并将移动部分与静态部分分开。像这样

.panel{
    position: fixed;
    left: 450px;
    top: -100%;
    height: 100%;
    width: 400px;
}

.panel-appear,
.panel-enter {
   top: -100%;
}

.panel-appear-active,
.panel-enter-active {
    top: 0;
    transition: all 250ms ease-out;
}

.panel-exit {
    top: 0;
}

.panel-exit-active {
    top: -100%
    transition: all 250ms ease-out;
}

看看this codepen，这就是我创建面板过渡的方式。

【讨论】：

【解决方案2】：

在搜索了一段时间后，我意识到我的问题与我的切换功能有关（在您的情况下为 onClick={() => props.onClose()}）。看来我的切换功能没有按预期工作。由于 onEntered 由“in{true}”触发，onExited 由“in{false}”触发，因此您必须确保每次点击锚标记时都会更改布尔值。查看您的代码似乎您的 onClose 函数只返回一个 void 函数而不是切换。尝试在真假之间切换，并将其传递给 in{//toggle 函数} 参数。

【讨论】：

【解决方案3】：

安装：

npm install react-transition-group

用法：

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={toShow} // boolean value passed via state/props to either mount or unmount this component
  timeout={300}
  classNames='my-element' // IMP!
  unmountOnExit
>
  <ComponentToBeAnimated />
</CSSTransition>

注意：确保使用 CSS 中的 class 属性应用以下样式：

.my-element-enter {
  opacity: 0;
  transform: scale(0.9);
}
.my-element-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}
.my-element-exit {
  opacity: 1;
}
.my-element-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

【讨论】：