如何让CSS中的过渡效果在复选框上生效？

Question

我正在尝试为网站上的一个元素添加过渡效果。这个元素被设置为 display:none，但当复选框被点击时（复选框是一个单独的元素），它被设置为 display:block。我想做的是，当复选框被选中时，将元素设置为 display:block，并显示一个过渡效果，而不是弹出来。以下是我的代码：

.category-text {
  width: 82%;
  padding-top: 5px;
  padding-left: 8px;
  font-family: 'Burbank', sans-serif;
  font-size: 30px;
  color: #F4D03F;
}

.desc-toggle {
  position: absolute;
  top: 5px;
  left: 84.4%;
  width: 73px;
  padding: 5px;
  font-family: 'Burbank', sans-serif;
  font-size: 20px;
  color: blue;
  cursor: pointer;
  z-index: 2;
  border: solid #ffffff 2px;
}

#toggle-1 {
  display: none;
}

input[type=checkbox]:checked ~ .category-description {
  position: absolute;
  display: block;
  -webkit-transition: height 0.5s ease-in;
  -moz-transition: height 0.5s ease-in;
  -ms-transition: height 0.5s ease-in;
  -o-transition: height 0.5s ease-in;
  transition: height 0.5s ease-in;
}

  <label class="desc-toggle" for="toggle-1">Description</label>
  <input type="checkbox" id="toggle-1">
  <div class="category-description">
    <p class="category-text">text</p>
  </div>

- LNinja

---

为什么复选框被设置为 display: none？ - Hydrothermal

复选框被设置为display:none以达到视觉效果。我使用了<label class="desc-toggle for="toggle-1">描述</label>，然后将#toggle-1设置为display:none。这将把文本“描述”转换为复选框。 - LNinja

你的代码片段中缺少最初隐藏文本的类，提醒一下。至于你想要的效果，当从display:none;更改为display:block;时，无法添加过渡效果。我建议使用visibility属性或过渡高度或宽度。 - Joey Breithaupt

我的目标是在复选框将元素设置为display:block时使高度缓慢增加。也许这是不可能的。 - LNinja

Answer 1

在CSS中，如果一个属性的值可以在确定的时间段内不断从一个值过渡到另一个值，则该属性是可动画化的。

`display` 属性是**不可动画化的**。浏览器在两个 `display` 值之间无法确定中间值（即元素不能处于 `display:none` 和 `display:block` 之间）。

相反，你需要始终显示元素，并将其从“不可见”状态（在此状态下，它完全不干扰其他元素）过渡到“可见”状态，以便进行过渡。

为了动画化一个属性，它必须有一个初始值，该值根据某些条件（在您的情况下为 `input:checked ~`）更改为另一个值。浏览器会根据被动画化属性的 `animation` 属性执行逐步过渡，而不是立即在两个值之间切换。

示例：

.category-text {
  font-size: 30px;
  color: #F4D03F;
}

.desc-toggle {
  font-size: 20px;
  cursor: pointer;
}

#toggle-1 {
  display: none;
}

.category-description {
  height: 0px;                         /* we start animation from 0px */
  overflow: hidden;                    /* without this the contents will be 
                                        * visible regardless of height */
  transition: height 0.5s ease-in;     /* transition has to be defined on base state of element */
  background-color: #f5f5f5;           /* make transition easier to observe */
}
input[type=checkbox]:checked ~ .category-description {
  height: 100px;                       /* change height when input is checked */
}

<label class="desc-toggle" for="toggle-1">Description</label>
<input type="checkbox" id="toggle-1">
<div class="category-description">
  <p class="category-text">text</p>
</div>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.

需要注意以下几点：

• transition必须定义在更通用的选择器上；如果你只在input:checked ~ *状态下定义，那么你的元素只有在跟随一个选中的输入时才会有过渡效果，并且在输入框未选中时不会有过渡效果（因此，当输入框未选中时，它将不会进行动画）。
• transition必须在两个可动画值之间进行（大多数浏览器无法从某些值动画到auto或initial，即使这些值可以由浏览器计算并转换为物理值）。然而，像velocity.js这样的库可以帮助你完成这个过程（它们为你计算并请求浏览器在实际值之间进行动画）。

- tao

Answer 2

我创建了一个新的代码片段，以使代码更加简洁，这是你想要的效果吗？

.content {
  height: 300px;
  max-height: 0px;
  width: 300px;
  background: blue;
  transition: max-height .3s ease-in-out;
}
#check {
  display: none;
}
#check:checked ~ .content {
  max-height: 300px;
}

<label id="click" for="check">Click Me</label>
<input type="checkbox" id="check">
<div class="content"></div>

- Joey Breithaupt