为父元素添加类后模态窗口动画失效问题排查

你的问题核心在于用display: none隐藏模态框——当元素从display: none切换到display: block时，浏览器会直接渲染元素，无法识别过渡动画需要的初始状态，自然触发不了transform的滑入效果。Bootstrap能正常运行，是因为它没有用display: none控制模态框显隐，而是用visibility、opacity结合定位实现视觉隐藏，同时保证元素始终在渲染流中，过渡动画能正常触发。

方案1：保留JS逻辑，修复动画问题 #

修改CSS，把模态框的显隐方式从display切换改为visibility+opacity，确保元素始终存在于渲染流：

.dropdown-modal {
  /* 替换原display: none */
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 1060;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  /* 给模态框本身添加过渡，实现背景淡入 */
  transition: visibility 0.3s ease-out, opacity 0.3s ease-out;
}
.dropdown-modal--active {
  /* 替换原display: block */
  visibility: visible;
  opacity: 1;
}
.dropdown-modal__contaner {
  height: 150px;
  position: relative;
  background: #fff;
  transition: transform 0.3s ease-out;
  transform: translate(0, -100%); /* 改成-100%让容器完全在视口外 */
}
.dropdown-modal--active .dropdown-modal__contaner {
  transform: translate(0, 0);
}

原JS和HTML代码可直接保留，点击按钮添加类后，就能触发背景淡入+容器滑入的动画。

方案2：纯CSS实现（完全不用JS） #

用checkbox的checked伪类控制模态框显隐，彻底脱离JS，和Bootstrap实现逻辑一致：

<input type="checkbox" id="modal-toggle" hidden>
<label for="modal-toggle" id="test">Open</label>
<div class="dropdown-modal">
   <label for="modal-toggle" class="dropdown-modal__overlay"></label>
   <div class="dropdown-modal__contaner">
      ...
   </div>
</div>

.dropdown-modal {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 1060;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: visibility 0.3s ease-out, opacity 0.3s ease-out;
}
/* 点击checkbox时激活模态框 */
#modal-toggle:checked ~ .dropdown-modal {
  visibility: visible;
  opacity: 1;
}
.dropdown-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.dropdown-modal__contaner {
  height: 150px;
  position: relative;
  background: #fff;
  transition: transform 0.3s ease-out;
  transform: translate(0, -100%);
  z-index: 1; /* 确保容器在遮罩层上方 */
}
#modal-toggle:checked ~ .dropdown-modal .dropdown-modal__contaner {
  transform: translate(0, 0);
}

点击按钮（实际是checkbox的关联label）就能触发动画，完全不需要JS。

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