如何实现DataTables筛选操作触发时表格淡入动画效果

核心思路是利用DataTable原生的绘制生命周期钩子，配合CSS透明度过渡实现，不会影响现有筛选、分页逻辑，也不会出现表格列错位的问题。

1. 添加CSS基础样式 #

优先用CSS实现过渡，性能比纯JS动画更好，还可以按需加轻微位移动画提升质感：

/* 表格基础过渡配置 */
#example {
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(0);
}
/* 可选：给表格包裹层加最小高度，避免动画过程中页面高度跳动 */
.dataTables_wrapper {
  min-height: 220px;
}

2. 绑定DataTable绘制事件 #

在现有DataTable初始化代码后加一段事件监听逻辑即可，不需要修改原来写的年龄筛选、部门筛选代码：

注意：不要用jQuery的fadeOut()/fadeIn()方法，这两个方法会将元素设为display:none，导致DataTable计算列宽出错，出现列错位问题。

$(document).ready(function () {
    // 原有自定义筛选逻辑保持不变
    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
        var min = parseInt($('#min').val(), 10);
        var max = parseInt($('#max').val(), 10);
        var age = parseFloat(data[3]) || 0;

        if (
            (isNaN(min) && isNaN(max)) ||
            (isNaN(min) && age <= max) ||
            (min <= age && isNaN(max)) ||
            (min <= age && age <= max)
        ) {
            return true;
        }
        return false;
    });

    var oTable = $('#example').DataTable({
        "pagingType": "simple",
        "ordering": false, // 原代码写的字符串"false"改为布尔值更规范
        "select": "single",
        "dom": '<<t>ip>'
    });

    // 新增动画逻辑开始
    let animLock = false;
    // 绘制开始前先将表格淡出
    oTable.on('preDraw', function () {
        if (!animLock) {
            animLock = true;
            $(this).css({
                opacity: 0,
                transform: 'translateY(6px)'
            });
        }
    });
    // 绘制完成后将表格淡入
    oTable.on('draw', function () {
        $(this).animate({
            opacity: 1,
            transform: 'translateY(0)'
        }, 300, function () {
            animLock = false;
        });
    });
    // 新增动画逻辑结束

    // 原有筛选事件绑定保持不变
    $('#min, #max').keyup(function () {
        oTable.draw();
    });
    $('select#officeSelector').change(function () {
        oTable.columns(2).search($(this).val()).draw();
    });
});

可调参数说明 #

• 动画速度：把CSS里的0.3s和JS里的300数值改大/改小，就能调整动画快慢，推荐200-400ms之间，体验最流畅
• 位移幅度：JS里的translateY(6px)可以改成想要的数值，改成0就是纯淡入淡出没有位移效果
• 如果不需要位移动画，把所有transform相关的代码删掉即可，只保留opacity相关逻辑

内容的提问来源于stack exchange，提问作者kodikai