fixed定位div动态添加类后transform translateY动画不生效如何解决

问题排查及修复方案 #

核心错误点 #

• 过渡属性误用：你在.modalContainer中错误使用了animation属性，想要实现class切换时的属性平滑过渡，需要使用transition属性。animation是用于调用@keyframes定义的关键帧动画的属性，不符合当前切换类触发过渡的使用场景。
• 可选注意项：确保.modalShow的CSS定义在.modalContainer之后，同优先级的选择器后定义的样式会覆盖先定义的样式，避免属性覆盖失效。

修正后的CSS代码 #

.modalContainer {
  position: fixed;
  height: 100%;
  width: 100%;
  background: red;
  /* 将animation改为transition，5s为动画总时长，可根据需求调整，常规弹窗动画推荐0.3~0.5s */
  transition: all 5s ease-out;
  transform: translateY(100%);
}

.modalShow {
  transform: translateY(0%);
}
.modalHide {
  transform: translateY(100%);
}

原有JSX代码逻辑说明 #

现有JSX的ref绑定、定时器加类的逻辑没有问题，修改CSS后即可实现预期效果：页面加载5秒后弹窗从底部向上滑入视口。

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