React中使用classnames切换类时CSS过渡动画不生效怎么解决

核心问题 #

• display属性无法触发过渡动画。你给.mobileMenu-subNavSlider默认设置了display: none，添加open类时切换为display: block，浏览器会直接渲染元素的最终状态，跳过transform的过渡计算。
• transition属性位置错误。你把过渡规则写在了.open选择器内，只有添加类时才会加载过渡规则，后续移除类关闭菜单时不会有退出动画。

修复方案 #

1. 移除display相关配置，改用visibility+opacity配合transform控制元素显隐，这三个属性都支持过渡动画
2. 将transition规则移到.mobileMenu-subNavSlider基础选择器下，保证出入场都能触发过渡效果

修改后的完整CSS代码 #

.mobileMenu {
   min-height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   background: #410078;
   color: #fff;
 }

.mobileMenu-subNavSlider {
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 40px rgb(0 0 0 / 60%);
  background: #6504b5;
  /* 移除display:none，改用以下属性控制显隐 */
  visibility: hidden;
  opacity: 0;
  transform: translateX(102%);
  /* 过渡规则放在基础类，出入场都生效，可自行调整动画时长 */
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.mobileMenu-subNavSlider.open {
  /* 移除display:block */
  visibility: visible;
  opacity: 1;
  transform: translateX(0%);
}   

.mobileMenu-body {
  padding: 80px 130px 30px;
  background: #6504b5;
}

修改后菜单即可实现从右向左的平滑滑入效果，后续需要添加关闭逻辑时，只要触发setVisible(false)即可自动实现从左向右滑出的退场动画。

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