CSS 如何动画切换表格行

在本文中，我们将介绍如何使用CSS来实现表格行的动画切换效果。

阅读更多：CSS 教程

1. 使用CSS Transition实现简单切换动画

CSS Transition是CSS3中的一个属性，它可以为元素的某个属性添加过渡效果。通过对表格行的display属性进行切换，我们可以实现表格行的显示和隐藏效果。下面是一个使用CSS Transition实现的简单切换动画的示例：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }

  tr {
    transition: all 0.3s ease;
  }

  .hidden {
    display: none;
  }
</style>

<script>
  function toggleRow() {
    var row = document.getElementById('row');
    row.classList.toggle('hidden');
  }
</script>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr id="row">
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

<button onclick="toggleRow()">切换表格行</button>

在上面的示例中，通过给表格行的display属性添加动画过渡效果，当点击”切换表格行”按钮时，表格行的显示和隐藏会有一个平滑的过渡效果。

2. 使用CSS Animation实现更复杂的切换动画

CSS Animation是CSS3中的另一个属性，它可以实现更复杂的动画效果。我们可以利用CSS Animation来实现表格行的淡入淡出效果。下面是一个使用CSS Animation实现的切换动画的示例：

<style>
  @keyframes fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }

  tr {
    animation: fade 0.5s;
  }

  .hidden {
    display: none;
  }
</style>

<script>
  function toggleRow() {
    var row = document.getElementById('row');
    row.classList.toggle('hidden');
  }
</script>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr id="row">
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

<button onclick="toggleRow()">切换表格行</button>

在上面的示例中，通过定义一个名为”fade”的动画，并将它应用于表格行，我们可以实现表格行的淡入淡出效果。

3. 使用JavaScript控制动画效果

除了纯粹使用CSS来实现动画效果外，我们还可以结合JavaScript来控制动画的开始和结束。下面是一个使用JavaScript控制动画的示例：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }

  tr {
    transition: all 0.3s ease;
  }

  .hidden {
    display: none;
  }
</style>

<script>
  function toggleRow() {
    var row = document.getElementById('row');
    if (row.classList.contains('hidden')) {
      row.style.display = 'table-row';
      setTimeout(function() {
        row.style.opacity = '1';
      }, 0);
    } else {
      row.style.opacity = '0';
      setTimeout(function() {
        row.style.display = 'none';
      }, 300);
    }
    row.classList.toggle('hidden');
  }
</script>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr id="row">
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

<button onclick="toggleRow()">切换表格行</button>

在上面的示例中，我们通过设置表格行的opacity属性来实现淡入淡出效果，并使用JavaScript控制动画的开始和结束过程。