Question

我正在使用AJAX填充表格，我将数据作为JSON返回，并希望使用新数据更新表格。

那很容易，我做到了：

var output= "";

        for (var i = 0; i < content.flights.length; i++) {
            output+= "<tr><td>";
            output+= content.flights[i].id;
            output+= "</td></tr>";
        }
document.getElementById("flights").tBodies[0].innerHTML = output;

我如何在两个版本之间淡入淡出？例如，当我有新数据时，如何在新旧数据之间淡入淡出？

这里的基本要求是以一种不错的方式添加数据。如果有更好的解决方案，请不要犹豫将我指向它！

感谢您的帮助！

Answer 1

这是一个示例，说明如何使用CSS产生淡入淡出效果并从服务器获取数据。

点击底部的“获取新数据”后，将发送一个新请求并重新加载该表

const fetchData = () => {
  fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
    var output= "";

    for (var i = 0; i < users.length; i++) {
        output+= "<tr><td>";
        output+= users[i].name;
        output+= "</td></tr>";
    }
    document.getElementById("table").tBodies[0].innerHTML = output;

    setTimeout(() => {
      document.getElementById("table").tBodies[0].classList.remove('fade-out'); 
    }, 400); // time for animation
})
}

document.getElementById('newDataBtn').addEventListener('click', function() {
    document.getElementById("table").tBodies[0].classList.add('fade-out');
    fetchData();
});

fetchData();

.t-body {
  opacity: 1;
  transition: opacity .5s;
}

.t-body.fade-out {
  opacity: 0;
  transition: opacity .5s;
}

<div id="root">

  <table id="table">
    <tbody class="t-body" id="tBody">
    </tbody>
  </table>

  <button id="newDataBtn">Get new data</button>

  
</div>

JavaScript：从一个表主体淡入另一个

1 个答案: