防止 select2-dropdown 在关闭时分离以对其进行动画处理

Question

我看到很多线程如何在打开/关闭时为 select2 下拉菜单设置动画，但我找不到任何可行的动画方式。 我想要 slideDown/slideUp select2 下拉菜单，而不是基本上显示它。 使用select2:opening 和select2:open 事件，滑动事件有效，但在关闭/关闭时不起作用，所以我试图弄清楚，我编辑了核心文件以使技巧有效，但是我知道编辑核心文件是一个不好的选择。

$('#select').select2({
   width: "100%",
   allowClear: false
}).on('select2:opening', function () {   
   $(this).on("select2:open", function () {
       $('.select2-dropdown').slideDown(500);    
   });
 //$(this).on("select2:closing", function () {
     //e.preventDefault();
     //$('.select2-dropdown').slideUp(1000);  
 //});
});

jsfiddle 绕行4327，我换了

  AttachBody.prototype._hideDropdown = function (decorated) {
   this.$dropdownContainer.detach();
  };

收件人：

  AttachBody.prototype._hideDropdown = function (decorated) {
   //this.$dropdownContainer.detach();
    var $this = this;

    $('.select2-dropdown').slideUp(500, function(){
        $this.$dropdownContainer.detach();
    })
  };

它有效，但我确信有更好的方法可以在不编辑核心文件的情况下完成这个技巧。

任何帮助将不胜感激

Answer 1

要在下拉打开时为slideDown 设置动画，您可以使用：

.on('select2:open', function(e) {
    $('.select2-dropdown').hide();
    setTimeout(function() {
      jQuery('.select2-dropdown').slideDown(1000);
    });

在初始化select2-dropdown 时需要在其中附加.on。

$('.select2-dropdown').hide(); 用于防止下拉菜单突然加载，添加setTimeout 用于为 slideDown 设置动画。

要在下拉关闭时为slideUp 设置动画，您需要使用：

.on('select2:closing', function(e) {
    e.preventDefault();
    setTimeout(function() {
      jQuery('.select2-dropdown').slideUp(1000, function() {
        close();
      });
    }, 0);

e.preventDefault() 用于阻止事件的默认操作，使其不会被触发。这是突然关闭。对于 setTimeout 几乎和打开一样，只是 slideUp 而不是 slideDown 和 close();

$("#select").select2('destroy'); 用于销毁现有的选择，这些选择在您关闭后卡住，您可以在下面的jsFiddle snippet 或@Islam Elshobokshy answer 中看到。

而init(); 用于重新初始化您的select2-dropdown。请参阅 sn-p 以获得明确的示例：

jQuery(document).ready(function() {
  init();
})


function init() {
  $('#select').select2({
    width: "100%",
    allowClear: false
  }).on('select2:open', function(e) {
    $('.select2-dropdown').hide();
    setTimeout(function() {
      jQuery('.select2-dropdown').slideDown(1000);
    });
  }).on('select2:closing', function(e) {
    e.preventDefault();
    setTimeout(function() {
      jQuery('.select2-dropdown').slideUp(1000, function() {
        close();
      });
    }, 0);
  });
}

function close() {
  $("#select").select2('destroy');
  init();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select id="select">
 <option value="1">Value 1</option>
 <option value="1">Value 2</option>
 <option value="1">Value 3</option>
 <option value="1">Value 4</option>
 <option value="1">Value 5</option>
 <option value="1">Value 61</option>
 <option value="1">Value 7</option>
 <option value="1">Value 8</option>
</select>

Answer 2

你可以这样做：

jQuery(document).ready(function() {
  $('#select').select2({
    width: "100%",
    allowClear: false
  }).on('select2:open', function(e) {
    $('.select2-dropdown').hide();
    setTimeout(function() {
      jQuery('.select2-dropdown').slideDown("slow");
    }, 0);
  }).on('select2:closing', function(e) {
    e.preventDefault();
    setTimeout(function(e) {
      jQuery('.select2-dropdown').slideUp("slow", function() {
        $("#select").select2('destroy').select2({
          width: "100%",
          allowClear: false
        });

      });
    }, 0);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select id="select">
  <option value="1">Value 1</option>
  <option value="1">Value 2</option>
  <option value="1">Value 3</option>
  <option value="1">Value 4</option>
  <option value="1">Value 5</option>
  <option value="1">Value 61</option>
  <option value="1">Value 7</option>
  <option value="1">Value 8</option>
</select>