7

我发现这篇文章如何在点击时创建滑动 DIV？

但所有的答案都是 Jquery 方法。有没有办法用 PURE CSS 来创建它？我还有一些其他的想法......

  1. 我可以添加什么以使向下滑动的 div 在滚动时保持不变
  2. 将触发动画的链接更改为“关闭”，以使 div 向后滑动

这是该帖子中示例的链接// http://shutterbugtheme.tumblr.com/

我也尝试过谷歌搜索，但唯一的结果是 jquery 方法......

4

8 回答 8

10

可以做到，尽管它有点小技巧。保持状态的两个元素（在 CSS 中称为 :checked）是复选框和单选按钮元素。因此，如果您通过使用 for 属性将复选框与标签关联并添加 div，则可以通过读取（隐藏）按钮的状态来获得结果：

<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>

和CSS：

input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }

包含动画打开/关闭效果的进一步说明和示例。

于 2012-11-16T22:42:57.863 回答
6

这在纯 CSS 中是不可能识别点击的。你可以用 :hover 和一个过渡来做到这一点，但这与没有 javascript 的情况一样接近。

.hover
{
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.slide
{
    position: absolute;
    top: 0;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
}

.hover:hover + .slide
{
    top: 50px;
}

http://jsfiddle.net/Kyle_/MaMu9/1/

请注意，虽然过渡是 CSS3 并且在 IE<9 和旧版本的更好的浏览器中不起作用。

编辑：在使用 CSS 中的 :focus 属性发布另一个答案后：有一个警告是可能的：您必须单击使其向下滑动的元素外部以使其向上滑动，否则它可以正常工作。

请注意，该元素必须具有 tabindex='1' （或任何有意义的数字，具体取决于元素在文档中的位置）才能正常工作。

.hover:focus + .slide
{
    top: 50px;
    -webkit-transition: top 1s;
}

http://jsfiddle.net/Kyle_Sevenoaks/MaMu9/1/

于 2012-11-16T07:35:13.797 回答
3

您可以识别元素上的“焦点”事件并使用 CSS 过渡对其进行操作。

这是一个示例，单击时会将 div 向下移动 50px

标记

<div tabindex='1' id='box'></div>​

CSS

#box {
 background-color:#3a6d90;
 width:100px; height:100px;    

 transition: margin-top 2s;
 -moz-transition: margin-top 2s; /* Firefox 4 */
 -webkit-transition: margin-top 2s; /* Safari and Chrome */
 -o-transition: margin-top 2s; /* Opera */
}

#box:focus {
 margin-top:50px;
 outline:0;
}

工作示例：http: //jsfiddle.net/NBHeJ/

于 2012-11-16T08:09:56.573 回答
2

这是如何开始的一个很好的例子。你可以在底部看到，他们发布了他们使用的动画函数的源代码，尽管这是 javascript。

滑动 js 通用

如果你想要纯 css，我会使用 ws3schools 多年来一直是优秀的资源，但请注意，很大程度上取决于浏览器对你想要的效果是否有效的支持。

w3schools-css

使它们具有效果的基本结构，您只需要沿着 body 内的两个 div 的线工作，在顶部隐藏和容器可见，并运行隐藏 div 的动画以显示将另一个 div 向下推，保持他们都内联。

<body>
 <div id="hidden-div"></div>
 <div id="main-content-div"></div>
</body>
于 2012-11-16T07:29:35.173 回答
1

这可以使用target伪类来检测点击来完成。

将按钮 href 设置为滑动 div 的 id。

然后可以通过在slidingDiv上设置滑动div的高度来完成向下滑动：使用transition高度上的css3来设置目标类。

我认为原始按钮没有办法更改其 href 以使用纯 css 关闭滑动 div，但是您始终可以在滑动 div 上添加一个关闭按钮来关闭它。

这个关闭按钮通过在滑动 div 类上添加相同的转换来工作。

这是一个工作演示。

享受。

于 2013-04-29T09:09:49.167 回答
1

运行此代码。

input {
  display: none;
}

label {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid;
  border-radius: 4px;
  background: tomato;
  color: #FFF;
  font-family: arial;
  -webkit-transition: background-color 0.1s, color 0.1s;
}

label:hover {
  background: #blue;
  color: #blue;
}

.test {
  -webkit-transition: height .3s ease;
  height: 0;
  overflow: hidden;
  width: 200px;
  background: tomato;
  margin-top: 10px;
  color: #FFF;
}

input:checked + .test {
  height: 100px;
}
<label for="check">Click me</label>

<input id="check" type="checkbox">

<div class="test">
  <p>I am some hidden text</p>
</div>

于 2018-11-30T22:44:50.093 回答
0

做同样事情的另一种方法：

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden;
}
.slide-up > div, .slide-down > div {
  transform: translateY(-100%);
  transition: .4s ease-in-out;
}
.slide-down > div {            
  transform: translateY(0);
}

工作示例：https ://jsfiddle.net/webarthur/3ep33h5s/1/

于 2016-08-03T03:33:11.003 回答
0

简单的：

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden
}
.slide-up > div, .slide-down > div {
  margin-top: -25%;
  transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {            
  margin-top: 0;
}

工作示例： https ://jsfiddle.net/webarthur/3ep33h5s/

于 2016-08-03T03:17:34.080 回答