javascript - 防止 select2-dropdown 在接近动画时被分离

Question

我看到很多线程如何在打开/关闭时对 select2 下拉菜单进行动画处理，但我找不到任何对其进行动画处理的工作方法。我想要 SlideDown/slideUp select2 下拉列表，而不是仅仅显示它。使用 select2:opening 和 select2:open event，slidedown 事件可以工作，但在关闭/关闭时不起作用，所以我试图弄清楚它出来了，我编辑了核心文件以使这个技巧发挥作用，但我知道编辑核心文件是一个糟糕的选择。

$('#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);  
 //});
});

jsfiddle4327行附近，我已经替换了

  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用于制作幻灯片向下动画。

要在下拉菜单关闭时设置 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。请参阅代码片段以获取清晰的示例:

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>