Question

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

出现正在工作，但现在没有。 onEntered fires，onExied没有。

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

CSS：

setColor(new Color(0, 0, 0)); //sets the color to Black

反应组件：

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

.getSecondLevelPanelOpened {
    top: 0;
}

Answer 1

安装：

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

Answer 2

搜索答案一段时间后，我意识到我的问题与切换功能有关（在您的情况下为onClick = {（）=> props.onClose（）}）。似乎我的切换功能无法正常运行。由于onEntered是用“ in {true}”触发的，onExited是用“ in {false}”触发的，因此您必须确保每次在锚标记上单击时都会更改布尔值。查看您的代码似乎您的onClose函数只返回一个void函数，而不是一个切换。尝试在true和false之间切换，并将其传递给in {// toggle function}参数。

Answer 3

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

appear

enter和in类。

appear-active

enter-active

appear和enter。

appear-done

enter-done和timeout。
exit属性设置为false后，in类重复步骤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，这就是我创建面板过渡的方式。

来自react-transition-group的CSSTransition不会退出

3 个答案: