如何在不修改Select2核心文件的情况下实现下拉框滑入滑出动画？

我完全理解你不想碰Select2核心文件的想法——改源码不仅难维护，后续版本更新还容易出问题。其实我们可以通过事件拦截+手动控制的方式实现关闭动画，完全不用动核心代码。

问题根源 #

你之前尝试绑定select2:closing却没成功，核心原因是Select2触发这个事件后，会立刻移除下拉框容器，导致你的slideUp动画根本没机会执行。所以关键是先阻止默认关闭行为，等动画跑完再让下拉框正常关闭。

完整解决方案代码 #

// 初始化Select2
$('#select').select2({
  width: "100%",
  allowClear: false
})
// 处理打开动画
.on('select2:open', function () {
  $('.select2-dropdown').hide().slideDown(500);
})
// 处理关闭动画
.on('select2:closing', function (e) {
  // 阻止默认关闭行为，避免下拉框被立刻移除
  e.preventDefault();
  
  // 获取当前Select2实例对应的下拉框（避免多组件冲突）
  const $dropdown = $(this).data('select2').$dropdown;
  
  // 执行slideUp动画，完成后手动触发关闭
  $dropdown.slideUp(500, () => {
    // 先解绑事件防止循环触发，再调用官方关闭方法
    $(this).off('select2:closing').select2('close');
  });
});

关键细节说明 #

• 改用select2:open做打开动画：select2:opening触发时下拉框还未渲染，直接用select2:open更稳妥，先隐藏再执行slideDown。
• 定位当前实例的下拉框：用$(this).data('select2').$dropdown获取当前组件的下拉容器，避免页面有多个Select2时动画混乱。
• 动画后解绑事件再关闭：如果不解绑select2:closing，手动调用select2('close')会再次触发该事件，造成循环。

这套方案既实现了你想要的滑入滑出动画，又完全不需要修改Select2核心代码，后续版本更新也不会受影响。

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