我怎样才能让 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>

Answer 1

我制作了一个新片段来稍微整理一下代码，这是您想要的效果吗？

.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>

Answer 2

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

display 属性不可动画化。浏览器无法在技术上确定 display 的两个值之间的值（即：元素不能在 display:none 和 display:block 之间的一半）。

您想要做的是始终 display 元素并将其从“不可见”状态（不干扰其他元素）到“visible”状态，在该状态下它按要求呈现。

为了使属性具有动画效果，它必须有一个初始值，该初始值会根据某些条件（在您的情况下 input:checked ~）更改为另一个值。根据动画 property.

的 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 ~ * 状态下定义 inside，则您的元素只有在遵循选中的输入时才会有过渡，而 不会有 当 input 未选中时（因此，当 input 未选中时它不会动画）。
transition 必须在两个动画值之间进行（大多数浏览器不能从某个值动画到 auto 或 initial，即使这些值可以由浏览器和转化为物理值）。但是，velocity.js 等库可以帮助解决这个问题（它们为您进行计算并请求浏览器在实际值之间进行动画处理）。

我怎样才能让 css 上的转换工作复选框

how can i get transitions on css to work checkbox

html

javascript

css

transition