如何在Bootstrap 4中复用Bootstrap 3模态框的默认过渡动画效果

解决方案 #

要完全复现Bootstrap 3的模态框淡入+下滑入场动画，仅需添加自定义CSS覆盖Bootstrap 4的默认模态框样式即可，无需修改原有JS调用逻辑：

1. 添加自定义CSS

/* 对齐Bootstrap3模态框动画参数 */
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
/* 对齐Bootstrap3遮罩层过渡效果 */
.modal-backdrop.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.modal-backdrop.show {
  opacity: 0.5;
}

上述样式已补全低版本浏览器兼容前缀，和Bootstrap 3原生的动画参数、效果完全一致。

2. 保留模态框基础结构

确保你的模态框HTML代码中保留了fade类，示例结构如下：

<div class="modal fade" id="yourModalId" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 这里写模态框的头部、内容、底部等代码 -->
    </div>
  </div>
</div>

原有Bootstrap 4的模态框JS调用方式不需要做任何修改，直接按原有逻辑触发即可，动画效果会和Bootstrap 3完全一致。

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