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

您还需要做更多事情:

1. CSSTransition 应该有一个 prop key。当它发生变化时，转换就会生效。
2. 您需要自己添加过渡样式，因为 React Transition Group 不是像 React-Motion 这样的动画库，它本身不会为样式添加动画。 _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