时间戳

首页 > 解决方案 > CSS仅在复选框检查时向下滑动

css - CSS仅在复选框检查时向下滑动

问题描述

我正在寻找在没有 JS 的情况下对复选框检查创建滑动效果，所以纯 css。问题是我们不能在这个页面上使用 JS。

我看过很多网站，但他们都说不同的东西，而且大多数都使用 JS。

我的 HTML：

<label>
 <input class="open-content" type="checkbox">
  <div class="label-container">
   <div style="color: #EC008C; font-size: 20px; font-weight: 700;">Open this tab</div>
   <div style="font-size: 32px; font-weight: 700;">+</div>
  </div>
  <div class="content-open fade-new">Show this content with slidedown</div>
</label>

我的 CSS：

<style type="text/css">
.open-content:checked ~ .content-open {
 visibility: visible!important; max-height: none!important;
 padding: 20px 0px 20px 20px;
 margin-top: 30px;
}

.fade-new { 
 transition: visbility 0.3s ease-in-out, max-height 0.3s ease-in-out;
}

.content-open {
 max-height: 0px;
 visibility: hidden;
 background-color: #F5F5F5;
}
</style>

以及它的外观： 在此处输入图像描述

但它不是动画的。我使用不透明度 0 到 1 来制作漂亮的动画，但如果可以使用复选框 + 纯 CSS，我更喜欢向下滑动。有谁知道如何做到这一点？

标签： css

解决方案

是的，可以使用复选框 hack创建纯 CSS 向下滑动。

在此示例中，我将 与 分开<label>并<input>通过以下方式链接它们：

  • 给<input>一个id
  • 给出<label>一个匹配的for属性

工作示例（版本 1）：

这个版本向下滑动。

.open-content {
 display: none;
}

.label-text {
  position: relative;
  display: block;
  z-index: 12;
  height: 32px;
  line-height: 32px;
  padding: 6px;
  color: #EC008C;
  font-size: 20px;
  font-weight: 700;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.label-text::after {
  content: '+';
  display: inline;
  color: rgb(0, 0, 0);
  font-size: 32px;
  font-weight: 700;
  vertical-align: bottom;
}

.content {
 position: relative;
 display: inline-block;
 z-index: 6;
 padding: 6px;
 background-color: #F5F5F5;
 opacity: 0;
 transform: translateY(-50px);
 transition: all 0.6s linear;
}

.open-content:checked ~ .content {
 opacity: 1;
 transform: translateY(0);
}
<input id="open-content" class="open-content" type="checkbox">

<label class="label-text" for="open-content">
Open this tab
</label>

<div class="content">
<p>Show this content with slidedown</p>
</div>

工作示例（版本 2）：

这个版本展开。

.open-content {
 display: none;
}

.label-text {
  position: relative;
  display: block;
  z-index: 12;
  height: 32px;
  line-height: 32px;
  padding: 6px;
  color: #EC008C;
  font-size: 20px;
  font-weight: 700;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.label-text::after {
  content: '+';
  display: inline;
  color: rgb(0, 0, 0);
  font-size: 32px;
  font-weight: 700;
  vertical-align: bottom;
}

.content {
 position: relative;
 display: inline-block;
 z-index: 6;
 padding: 6px;
 height: 0;
 background-color: #F5F5F5;
 opacity: 0;
 overflow: hidden;
 transition: all 0.6s linear;
}

.open-content:checked ~ .content {
 opacity: 1;
 height: 120px;
}
<input id="open-content" class="open-content" type="checkbox">

<label class="label-text" for="open-content">
Open this tab
</label>

<div class="content">
<p>Show this content with slidedown</p>
<p>Show this content with slidedown</p>
<p>Show this content with slidedown</p>
</div>

延伸阅读：

推荐阅读