为什么React抽屉组件关闭时无退出动画直接消失？

问题根因 #

1. 状态初始值缺失：isAnimating没有设置初始值，默认是undefined，当isDrawerOpen变为false时，直接命中!isDrawerOpen && !isAnimating分支，给元素加上drawer-out类，该类的display: none会直接隐藏元素，既无法播放退出动画，也不会触发onAnimationStart回调更新isAnimating状态。
2. CSS逻辑错误：drawer-out类同时设置了退出动画和display: none，隐藏元素上无法执行动画效果。另外原有动画没有加forwards属性，动画结束后会回弹到元素初始状态。

修复后的代码 #

组件代码 #

const Drawer = ({ closeDrawer, isDrawerOpen }) => {
  const [isAnimating, setIsAnimating] = useState(false);
  let drawerClassName;
  if (isDrawerOpen) {
    drawerClassName = "drawer-in";
  } else if (isAnimating) {
    drawerClassName = "drawer-animating";
  } else {
    drawerClassName = "drawer-out";
  }
  return (
    <>
      <div
        className={`drawer ${drawerClassName}`}
        onAnimationStart={() => setIsAnimating(true)}
        onAnimationEnd={() => setIsAnimating(false)}
      ></div>
      <div onClick={closeDrawer}>关闭按钮</div>
    </>
  );
};

CSS代码 #

.drawer {
  height: 100%;
  width: 60%;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 1;
  z-index: 3;
  transform: translateX(100%);
}

.drawer-in {
  animation: 0.7s drawerIn forwards;
  display: block;
}

.drawer-animating {
  animation: 0.7s drawerOut forwards;
  display: block;
}

.drawer-out {
  display: none;
}

@keyframes drawerIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes drawerOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

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