CSS 使用CSS3过渡效果显示/隐藏表格行

在本文中，我们将介绍如何使用CSS3过渡效果来显示和隐藏表格行。CSS3过渡效果是一种可以在元素的属性发生变化时产生平滑动画效果的技术。通过应用过渡效果，我们可以为表格行的显示和隐藏添加一些动态效果，提升用户体验。

阅读更多：CSS 教程

CSS3 过渡效果

在介绍如何使用CSS3过渡效果显示/隐藏表格行之前，我们首先来了解一下CSS3过渡效果的基本概念。

CSS3过渡效果允许我们在元素的某个属性发生变化时添加一些平滑的动画效果。常用的属性包括width、height、opacity、background-color等。通过定义过渡效果的持续时间、速度曲线和延迟时间，我们可以控制元素的变化过程，从而实现各种各样的动画效果。

使用CSS3过渡效果显示表格行

接下来，我们将介绍如何使用CSS3过渡效果来显示表格行。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

tr {
  height: 0;
  opacity: 0;
  transition: height 0.5s ease-out, opacity 0.5s ease-out;
}

tr.show {
  height: 30px;
  opacity: 1;
}
</style>
</head>
<body>

<button onclick="showRow()">显示表格行</button>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr class="row">
    <td>张三</td>
    <td>20</td>
  </tr>
  <tr class="row">
    <td>李四</td>
    <td>25</td>
  </tr>
</table>

<script>
function showRow() {
  var rows = document.getElementsByClassName("row");
  for (var i = 0; i < rows.length; i++) {
    rows[i].classList.add("show");
  }
}
</script>

</body>
</html>

在这个示例中，我们通过使用CSS3过渡效果来实现显示表格行的动画效果。初始状态下，表格行的高度为0，透明度为0，没有显示出来。当点击“显示表格行”按钮时，通过JavaScript代码将表格行的show类添加到每一行上，从而触发过渡效果。通过指定过渡效果的height和opacity属性，我们实现了表格行从隐藏到显示的平滑动画效果。

使用CSS3过渡效果隐藏表格行

类似地，我们也可以使用CSS3过渡效果来隐藏表格行。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

tr {
  height: 30px;
  opacity: 1;
  transition: height 0.5s ease-out, opacity 0.5s ease-out;
}

tr.hide {
  height: 0;
  opacity: 0;
}
</style>
</head>
<body>

<button onclick="hideRow()">隐藏表格行</button>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr class="row">
    <td>张三</td>
    <td>20</td>
  </tr>
  <tr class="row">
    <td>李四</td>
    <td>25</td>
  </tr>
</table>

<script>
function hideRow() {
  var rows = document.getElementsByClassName("row");
  for (var i = 0; i < rows.length; i++) {
    rows[i].classList.add("hide");
  }
}
</script>

</body>
</html>

在这个示例中，我们通过使用CSS3过渡效果来实现隐藏表格行的动画效果。初始状态下，表格行的高度为30px，透明度为1，完全显示出来。当点击“隐藏表格行”按钮时，通过JavaScript代码将表格行的hide类添加到每一行上，从而触发过渡效果。通过指定过渡效果的height和opacity属性，我们实现了表格行从显示到隐藏的平滑动画效果。