防止 div 每秒刷新列表项的动画

Question

我有一个页面每秒列出数据库中的文件。

期望的结果

• 我希望 所有 li 元素在页面加载时一个一个地淡入。

• 然后在新文件添加到数据库时仅淡入 新的 li 元素，否则对已列出的元素没有动画。

为了获得我使用 setInterval 的新文件列表，这反过来又导致所有列表项每秒一个一个地淡入。我应该怎么做才能达到预期的效果？

总结一下我在问什么

我正在寻求一种方法来显示元素，就好像它们在页面加载时淡入一样。然后，如果将新项目添加到数据库中，则仅将它们与褪色效果一一显示，但此时不应将褪色效果应用于旧物品。

JS

$(document).ready(function() {
    var filelist = $('#file_list');
    $('#loading').show();

    var checkUpdate = function () {
        $.ajax({
            type: "GET",
            url: "generate_list.php",
            success: function (result) {
                $('#loading').hide();
                var arr = JSON.parse(result);
                console.log(arr);
                if (arr.length > 0) {
                    $('#empty_storage').hide();
                    filelist.html(arr);

                    $('li').each(function (i) {
                        $(this).delay(400*i).fadeIn(400);
                    });
                }
                else {
                    filelist.html('');
                    $('#empty_storage').show();
                }
            },
            error: function (response) {
                $('#loading').hide();
                $.alert({
                    theme: 'black',
                    title: false,
                    content: response
                });
            }
        });
        setTimeout(checkUpdate, 1700);
    };
    setTimeout(checkUpdate, 1700);
}); 

CSS

#file_list li
{
    overflow: hidden;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 5px;
    display: none;
}

PHP 代码片段

// Fetching only last 10 records LIFO
    $query = $dbh->prepare("SELECT * FROM uploads ORDER BY id DESC LIMIT 10");
    $query->execute();

    $items = array();
    while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
        // Generate respective data to display
        $file_id            = $row['id'];
        $ico_path           = $base_icon_src.get_logo($row['file_ext']);
        $full_file_name     = $row['file_name'].'.'.$row['file_ext'];
        $file_ext           = $row['file_ext'];
        $file_code          = $row['file_code'];
        $download_file_path = './storage/'.$file_code.'.'.$file_ext;
        $file_size          = $row['file_size'];
        $file_upload_time   = $row['timestamps'];

        if(file_exists($download_file_path)) {
            // Generating markup
            $items[] = '<li>
                        <div class="f_icon"><img src="' . $ico_path . '"></div>
                        <div class="left_wing">
                            <div class="progressbar"></div>
                            <a class="download_link" href="#" id="'.$file_id.'"><div class="f_name">' . $full_file_name . '</div></a>
                            <div class="f_time_size">' . date("M d, Y", $file_upload_time) . '&nbsp; &#149; &nbsp;' . human_filesize($file_size) . '</div>
                        </div>
                        <div class="right_wing">
                            <div class="f_delete">
                                <a class="btn btn-danger" href="#" aria-label="Delete" data-id="'.$file_id.'" data-filename="'.$full_file_name.'">
                                <i class="fa fa-trash-o fa-lg" aria-hidden="true" title="Delete this?"></i>
                                </a>
                            </div>
                        </div>
                        </li>';
        }
    }
    //content in $items must be in UTF-8
    echo json_encode($items);

Answer 1

一般来说 - 这是您应该遵循的工作流程：

1. 在页面加载时（第一次）获取要预览的文件列表（可以是所有文件，也可以是最后一个 X）。确保您有 last 商品的 id（来自数据库）（如果您的商品是订单，则为最大的 id）。我们称之为MAX_ID。
2. 加载后 - 一个一个地为它们设置动画。
3. 使用setTimeout，获取“下一批”文件（您需要将您从#1 保存的ID 传递给php 脚本，因此您只能获取id > max_id 的文件）。
4. 如果您有新文件 - 添加它们（您可以一个一个地为它们设置动画）。
5. 将MAX_ID 更新为您从“新批量”中获得的新ID。
6. 在success 函数中，您应该再次调用（使用setTimeout 函数获取“下一个批量”的代码（#3）。

这是一个简单的例子：

$(function() {
  $('li').hide();
  $($("li").get().reverse()).each(function(i) {
    $(this).delay(400*i).fadeIn(400);
  });
});

items = ['a', 'b', 'c', 'd']
$('#a1').click(function() {
  $(items).each(function(i, val) {
    li = $('<li>').text(val).hide();
    $('#u1').prepend(li);
    li.delay(400*i).fadeIn(400);
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="u1">
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li>2</li>
  <li>1</li>
</ul>

<div id="a1">Click to add more items</div>