修改Bootstrap模态框关闭按钮的动画为向左滑出

嘿，我明白你想要的效果——打开时从左往右滑入，关闭时反过来从右往左滑出，而不是Bootstrap默认的淡出。咱们来一步步搞定它：

1. 梳理动画逻辑 #

你已经实现了打开时的滑入效果，但默认关闭是直接移除.in类让模态框消失，所以我们需要给关闭过程加个反向滑动过渡，还要确保动画时机和Bootstrap的模态框事件同步。

2. 调整CSS规则 + 新增JS辅助 #

首先，我们需要修改现有CSS，再添加几行JS来捕获关闭事件，触发反向动画：

第一步：更新CSS #

把你现有的模态框相关CSS替换成下面的代码，每个规则的作用我都标注出来了：

/* 初始未打开状态：模态框藏在左侧视口外 */
.modal.fade.right .modal-dialog {
  -webkit-transform: translate3d(-125%, 0, 0);
  transform: translate3d(-125%, 0, 0);
  transition: transform 0.3s ease-out; /* 打开动画的过渡曲线 */
}

/* 打开状态：模态框滑入到页面正常位置 */
.modal.fade.right.in .modal-dialog {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* 关闭过程中：模态框滑出到右侧视口外（反向动画） */
.modal.fade.right .modal-dialog.closing {
  -webkit-transform: translate3d(125%, 0, 0);
  transform: translate3d(125%, 0, 0);
  transition: transform 0.3s ease-in; /* 关闭动画的过渡曲线 */
}

/* 保留你原来的其他样式 */
#modal h2 { margin:0; }
#modal .copy,#modal .header, #modal .footer { padding: 5px; }
.modal-content { background: #f7f7f7; position: relative; z-index: 20; }
#modal .copy { background: #fff; }
#modal .overlay { background-color: #000; background: rgba(0,0,0,.5); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10; }

第二步：添加JS事件监听 #

我们需要利用Bootstrap的模态框事件，在关闭开始时给模态框容器加一个临时类，触发反向滑动：

// 注意：如果你的模态框ID不是#modal，请替换成对应选择器
$('#modal').on('hide.bs.modal', function() {
  // 关闭开始时，给模态框容器加closing类
  $(this).find('.modal-dialog').addClass('closing');
}).on('hidden.bs.modal', function() {
  // 关闭完成后，移除closing类，恢复初始状态
  $(this).find('.modal-dialog').removeClass('closing');
});

3. 原理说明 #

• 打开模态框时，Bootstrap会给模态框添加.in类，触发CSS过渡，让模态框从左侧外滑到页面中间（从-125%到0）。
• 点击关闭按钮时，hide.bs.modal事件先触发，我们给.modal-dialog加closing类，触发另一个过渡，让模态框从中间滑到右侧外（从0到125%）。
• 动画结束后，hidden.bs.modal事件触发，移除closing类，让模态框回到初始的左侧外状态，为下一次打开做准备。

小提示 #

• 过渡时间0.3s可以根据你的需求调整，比如改成0.5s让动画更平缓。
• 确保你的模态框已经正确添加了.fade和.right类，不然CSS规则不会生效。
• 如果你用的是Bootstrap 4+，类名可能略有不同，但核心逻辑是一样的——利用类切换和CSS过渡实现动画。

这样就能完美实现你想要的反向滑动关闭效果啦！

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