CSS 寻找一种优雅的只使用CSS的方法来隐藏/显示自动高度的内容（带过渡效果）

在本文中，我们将介绍一种优雅的只使用CSS的方法来隐藏/显示自动高度的内容，并添加过渡效果。有时候，我们需要根据用户的交互行为来显示或隐藏一些自动高度的内容，比如下拉菜单或折叠面板。这种方法可以通过使用CSS的伪类和过渡效果来实现。

阅读更多：CSS 教程

使用CSS选择器隐藏和显示内容

首先，我们需要添加一个包裹着我们要隐藏/显示内容的容器。假设我们有一个<div>元素作为容器，其中包含了我们要隐藏/显示的内容。给这个容器添加一个特定的类名，比如toggle-container。然后，我们可以使用CSS选择器来选择这个容器，并设置其高度为0，同时隐藏溢出内容。

.toggle-container {
  height: 0;
  overflow: hidden;
}

接下来，我们可以使用CSS的伪类:checked来根据用户的选择状态来切换容器的高度。比如，我们可以使用一个<input>元素作为开关，当选择状态为选中时，显示容器的内容，同时将其高度设置为自动。

.toggle-container #toggle:checked ~ .content {
  height: auto;
  overflow: visible;
}

在上述代码中，我们使用了CSS的兄弟选择器~，表示选择在同一级别中跟在#toggle:checked之后的.content元素。当#toggle元素被选中时，.content元素的高度将被设置为自动，溢出内容可见。

使用过渡效果实现平滑的动画效果

除了隐藏和显示内容之外，我们还可以通过添加过渡效果来实现平滑的动画效果。CSS的过渡效果可以让我们在样式改变时添加一个渐变的过程，使其更加平滑和可视化。

首先，我们可以给容器设置一个固定的高度，比如200像素。

.toggle-container {
  height: 200px;
  overflow: hidden;
  transition: height 0.5s ease;
}

在上述代码中，我们添加了一个transition属性，指定了height属性的过渡效果。0.5s表示过渡效果的总时长为0.5秒，ease表示过渡效果的速度函数为缓动。

接下来，我们需要修改之前的选择器，将容器的高度设置为0。

.toggle-container #toggle:checked ~ .content {
  height: 0;
  overflow: hidden;
}

这样，当用户选择开关时，容器的高度将从200像素逐渐变为0，并在过渡效果的作用下呈现平滑的动画效果。

示例

下面是一个完整的示例，演示如何使用CSS隐藏/显示自动高度的内容并添加过渡效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    .toggle-container {
      height: 0;
      overflow: hidden;
      transition: height 0.5s ease;
    }

    .toggle-container #toggle:checked ~ .content {
      height: auto;
      overflow: visible;
    }

    .content {
      background-color: lightgray;
      padding: 10px;
    }
  </style>
</head>
<body>
  <label for="toggle">Toggle Content:</label>
  <input type="checkbox" id="toggle">

  <div class="toggle-container">
    <div class="content">
      This is the toggleable content.
    </div>
  </div>
</body>
</html>

在上述示例中，我们使用了一个复选框作为开关，并给容器添加了一个类名toggle-container。容器内部的内容使用类名content进行样式设置。当复选框被选中时，内容将显示出来，并通过过渡效果进行平滑的动画过渡。