React Transition Group配置unmountOnExit后Transition入场动画失效如何解决

问题原因 #

开启unmountOnExit属性后，当in值为false时组件会完全从DOM中卸载。当in再次变为true时，组件属于首次挂载状态，而Transition组件默认不会在组件初次挂载时触发入场动画，同时你没有配置挂载阶段对应的appearing状态样式，就会出现入场动画直接跳过的情况。

解决步骤 #

1. 给Transition组件添加appear={true}属性，开启组件初次挂载时的过渡动画
2. 在transitionStyles中新增appearing状态的样式配置，和entering保持一致即可
3. 可选添加mountOnEnter={true}，和unmountOnExit配对使用，保证组件只有在需要展示时才挂载，避免不必要的DOM操作

修改后的完整代码 #

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out, transform ${duration}ms ease-in-out`,
  opacity: 0,
  transform: 'scale(.1)',
};

const transitionStyles = {
  entering: { opacity: 1, transform: 'none' },
  entered: { opacity: 1, transform: 'none' },
  exiting: { opacity: 0, transform: 'scale(.1)' },
  exited: { opacity: 0, transform: 'scale(.1)' },
  // 新增appearing状态，对应首次挂载的入场阶段
  appearing: { opacity: 1, transform: 'none' },
};

const FadeScaleAlert = ({ in: inProp }) => (
  {/* 添加appear和mountOnEnter属性 */}
  <Transition in={inProp} timeout={duration} unmountOnExit appear mountOnEnter>
    {(state) => (
      <Alert
        variant="primary"
        style={{
          ...defaultStyle,
          ...transitionStyles[state],
        }}
      >
        <Alert.Heading>
          动画提示消息
        </Alert.Heading>
        <p>
          该提示消息会通过过渡动画的方式挂载和卸载到DOM中。
        </p>
      </Alert>
    )}
  </Transition>
);

内容的提问来源于stack exchange，提问作者Anatol Zakrividoroga