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

Posted 2023-03-06

【中文标题】使用 react-transition-group 作为子组件接收新的道具

【英文标题】：use react-transition-group as child component receives new props

【发布时间】：2020-07-19 12:01:06

【问题描述】：

我有一个子组件，我想在其中使用 slide-out 动画，因为新的道具正在传递给它，我尝试使用 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>
);

【参考方案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

【讨论】：

非常感谢您的精彩解释！