我怎样才能让 CSS 上的转换工作复选框答案

【问题标题】：how can i get transitions on css to work checkbox我怎样才能让 CSS 上的转换工作复选框
【发布时间】：2018-12-16 19:38:51
【问题描述】：

我正在尝试为我网站上的元素添加过渡效果。此元素设置为 display:none，但在单击复选框时设置为 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>

【问题讨论】：

为什么复选框设置为display: none？
复选框设置为 display:none 用于视觉目的。我做了 Description 然后将 #toggle-1 设置为显示：无。这会将文本“描述”变成复选框
您在 sn-p 中的 css 缺少最初隐藏文本的类，只是提醒一下。至于您正在寻找的效果，您无法将过渡添加到 display:none;当更改为显示：块；。我建议使用可见性属性或过渡高度或宽度。
我的目标是在复选框将元素设置为 display:block 时使高度缓和。也许那是不可能的。

标签： javascript html css transition

【解决方案1】：

在 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 等库可以提供帮助（它们会为您进行计算并请求浏览器在实际值之间进行动画处理）。

【讨论】：

【解决方案2】：

我做了一个新的sn-p来整理一下代码，这是你想要的效果吗？

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

【讨论】：