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

Question

我看到很多线程如何在打开/关闭时为 select2 下拉菜单设置动画，但我找不到任何可行的方法来设置它的动画。我想要 slideDown/slideUp select2 下拉菜单，而不是基本上显示它。使用select2:openingandselect2: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 Arround 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();
    })
  };

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

任何帮助，将不胜感激

标签： javascriptjqueryjquery-select2

Answer 1

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

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

.on初始化select2-dropdown. _

$('.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 片段或@Islam Elshobokshy 答案中看到。

并init();用于重新初始化您的select2-dropdown. 请参阅片段以获取清晰的示例：

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>