javascript - Select2.js 和 jQuery slideDown 动画滞后/抖动

Question

我有一个 select2.js 下拉菜单，我想制作动画；我希望下拉菜单可以滑动而不是突然出现。

这就是我现在正在做的:

var select = $("#select").select2({
     minimumResultsForSearch: -1
});

$('#select').on('select2:open', function (e) {
    $("#select option[value='0']").remove();
    $('.select2-results').hide().slideDown("slow", "easeInOutQuint");
});

问题是我第一次打开下拉菜单时，有轻微的滞后/抖动。以下是对正在发生的事情的更准确描述:

• 点击选择容器
• 选择下拉菜单开始向下滑动。
• 动画下降 20%，它滞后了 0.2 秒(试图消除它)
• 向下滑动然后继续正常。

第一次之后，slideDown就完美无缺了。这只是第一次出现抖动/滞后。

有什么想法吗？

请注意，easeInOutQuint 来自 jQuery Mobile 转换。

Answer 1

你需要在 .select2-dropdown 上应用它，超时功能检查下面的代码我是如何实现的

jQuery('#select').on('select2:open', function (e) {
   jQuery('.select2-dropdown').hide();
   setTimeout(function(){ jQuery('.select2-dropdown').slideDown("slow", "easeInOutQuint"); }, 200);
});