1

尝试使用 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;
4

3 回答 3

2

The problem is in your CSS and classNames props on you. The CSSTransition component applies the classes like so.

  1. appear and enter classes are added as soon as the in prop is set to true.
  2. appear-active and enter-active are added right after the appear and enter classes are set.
  3. appear-done and enter-done are added after the duration set in the timeout passed.
  4. the exit classes repeat Step 1-3 just after the in prop is set to false.

The reason your exit calls don't work is probably due to only setting one exit class and 0 set to your enter duration. Try setting your transition rule on the active classes to ensure that the transition is set for the whole duration of the transition and separate the moving parts from the static ones. Like so

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

Take a look at this codepen, this is how I create a panel transitions.

于 2018-09-23T09:03:41.220 回答
1

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

于 2020-06-27T17:30:54.777 回答
0

安装：

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;
}
于 2020-05-06T05:29:11.217 回答