css - 使用 react-transition-group 作为子组件接收新的 Prop

Question

我有一个我想使用的子组件 slide-out动画作为新 Prop 传递给它，我尝试使用 react-transition-group/switch-transition 但不太清楚如何使用它

子组件渲染方法如下所示

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应该有 Prop 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