一个 CSSTransition 组件的细节

#1

公司代码遇到要加出入动画, 找了以前的 transition group 做, 发现已经被重构好多次了.

语法改了一些, 列表大致上还是用 transition group 做, 单个组件的出入动画, 可以用 CSSTransition 组件直接生成, 直接看网上的例子 https://reactcommunity.org/react-transition-group/css-transition

有一些坑,

  • CSS transition duration 的写法有点改了, 在 active 里面写, 不然是不生效的,
  • unmountOnExit 属性需要手动写, 不然不会自动消失.

调试问题可能比较麻烦, 但是大致代码还算短,

function Example() {
  const [showButton, setShowButton] = useState(true);
  const [showMessage, setShowMessage] = useState(false);
  return (
    <Container style={{ paddingTop: '2rem' }}>
      {showButton && (
        <Button
          onClick={() => setShowMessage(true)}
          size="lg"
        >
          Show Message
        </Button>
      )}
      <CSSTransition
        in={showMessage}
        timeout={300}
        classNames="alert"
        unmountOnExit
        onEnter={() => setShowButton(false)}
        onExited={() => setShowButton(true)}
      >
        <Alert
          variant="primary"
          dismissible
          onClose={() => setShowMessage(false)}
        >
          <Alert.Heading>
            Animated alert message
          </Alert.Heading>
          <p>
            This alert message is being transitioned in and
            out of the DOM.
          </p>
          <Button onClick={() => setShowMessage(false)}>
            Close
          </Button>
        </Alert>
      </CSSTransition>
    </Container>
  );
}

.alert-enter {
  opacity: 0;
  transform: scale(0.9);
}
.alert-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}
.alert-exit {
  opacity: 1;
}
.alert-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}