Question

我正在尝试创建一个简单的排行榜表，该表可以实时更新（或足够接近）。但是我希望对其进行动画处理。我已经能够创建一个更新表，该表使用加载另一个PHP页面的简单AJAX脚本每秒更新一次。所有这些都可以正常工作并按原样显示该表，但是我不知道如果另一个播放的得分高于他们，如何使它向上/向下动画。

我做了什么：

leaderboard.html

<html>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function() {
     $("#Refresh").load("leaderboardupdate.php");
   var refreshId = setInterval(function() {
      $("#Refresh").load('leaderboardupdate.php');
   }, 1000);
   $.ajaxSetup({ cache: false });
});

</script>
</html>

leaderboardupdate.php

<?php
$sql = "SELECT Name, Kills FROM Table ORDER BY Kills DESC LIMIT 5";
$result = $conn->query($sql);

echo '<div id="container">';

while($row = $result->fetch_assoc()) { 


<div class="row">
    <div class="name">'. $row["Name"] .'</div>
    <div class="score">' .$row["Kills"]. '</div>
</div>';

}
echo '</div>';

?>

就像我说的那样，这成功创建了一个表并按应有的方式更新了数据（按SQL查询中的Kills顺序），但是如果他们在Kills方面超过了另一个玩家，我想进行动画处理。

我可以找到一个最接近的例子： https://codepen.io/bsngr/pen/WbLEvp

我研究了Socket.IO，尽管它允许我获取实时数据，但我认为它不会使我上下滚动动画，这就是我面临的问题。 / p>

Answer 1

您是对的sockets.io不会让您这么做，因为它与动画没有任何关联，但是他们会让您的ap知道“何时进行动画处理”来使您进行动画处理。上次我检查sockets.io是为了node.js是为了PHP是否支持PHP或WebSockets是否已开始支持WebSockets。

<?php

$results = $conn->UpdateSomething(); // the place in your code where actions happen;
$socketConnection.trigger($channel, 'update', $results) // this will trigger update event on a $channel with data $results

?>

然后在您的后端

ServiceWorkers

您还可以使用LongPolling，ShortPolling和getElementById来监听实时变化，并在服务器触发的事件上修改DOM

动画步骤

要制作实际的动画，您可以按照以下步骤操作

1-找到包含新领导者的dom元素，您可以通过clickedDiv并为板上的每个项目赋予唯一ID来轻松实现。

2-获取之前的领导者，理想情况下，该领导者仍将排在您的排行榜顶部

3-完成后，请遵循以下示例Swapping two HTML elements visually and on the DOM, and animate it all?。在此示例中，prev是您的新领导者，<li>是您的老领导者。

Answer 2

Animate.css是一个有用的动画库。希望您觉得有用。

此外，尝试使用套接字而不是ajax来获取实时数据。

如何创建动画的实时排行榜表格？

2 个答案: