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

这是您的方法：

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>

Answer 2

要为下拉菜单中的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。参见示例以了解清晰的示例：

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>

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

2 个答案: