Предотвратить отсоединение раскрывающегося списка select2 при его анимации - PullRequest
Новая
       9

Предотвратить отсоединение раскрывающегося списка select2 при его анимации

0 голосов
/ 30 января 2019

Я видел много тем, как анимировать выпадающий список 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();
    })
  };

Это работает, но я уверен, что есть лучший способ сделать трюк без редактирования файла ядра.

Любая помощь будетцениться

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Для анимации slideDown при открытии выпадающего меню вы можете использовать: 

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

, где вам нужно добавить .on при инициализации select2-dropdown.

$('.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 или @ Islam Elshobokshy answer .

And 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>
0 голосов
/ 30 января 2019

Вот как вы можете это сделать: 

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>
...