使用 react-transition-group 作为子组件接收新道具

Question

我有一个子组件，我想在其中使用 slide-out 动画，因为新道具正在传递给它，我尝试使用 react-transition-group/switch-transition 但不太清楚如何使用它

子组件render方法如下

return (
  <SwitchTransition mode="out-in">
    <CSSTransition
      classNames="slide"
    >
      <div className={classnames("fields-group", containerClass)}>
        {/* <pre>{JSON.stringify(this.props.fields, null, 2)}</pre>*/}

        {fields}
      </div>
    </CSSTransition>
  </SwitchTransition>
);

Answer 1

您还有更多事情要做：

CSSTransition 应该有一个道具 key。当它改变时，过渡将生效。
你需要自己添加过渡样式，因为，React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. _reference

所以子组件看起来像这样：

function Child({ propToAnimate }) {
  return (
    <>
      <h4>Child Component</h4>
      <div className="main">
        <SwitchTransition mode="out-in">
          <CSSTransition
            key={propToAnimate}
            addEndListener={(node, done) => {
              node.addEventListener("transitionend", done, false);
            }}
            classNames="fade"
          >
            <div className="button-container">
              <div className="animate">
                <pre>state: {propToAnimate}</pre>
              </div>
            </div>
          </CSSTransition>
        </SwitchTransition>
      </div>
    </>
  );
}

以及样式（例如幻灯片动画）：

.fade-enter .animate {
  opacity: 0;
  transform: translateX(-100%);
}
.fade-enter-active .animate {
  opacity: 1;
  transform: translateX(0%);
}
.fade-exit .animate {
  opacity: 1;
  transform: translateX(0%);
}
.fade-exit-active .animate {
  opacity: 0;
  transform: translateX(100%);
}
.fade-enter-active .animate,
.fade-exit-active .animate {
  transition: opacity 500ms, transform 500ms;
}

https://codesandbox.io/s/switchtransition-child-component-dk4jo

使用 react-transition-group 作为子组件接收新道具

use react-transition-group as child component receives new props

css

reactjs

animation

react-transition-group