纯CSS滑动效果

原文地址：Pure CSS Slide Up and Slide Down
示例地址：Pure CSS Slide Demo
原文日期： 2013年08月26日
翻译日期： 2013年08月27日

如果能避免使用JavaScript就实现DOM元素动画效果,那我非常乐于不用JS去实现。
因为更高效，而且不需要JS框架来一步步处理，代码更美观优雅。
用纯CSS来实现很难确定的一个特效是 上下滑动——当向上滑的时候内容渐变隐藏，向下滑动内容渐变显示。
之所以难以实现的原因是你可能不能获得内容的高度。
在经历了多种多样的CSS属性之后，我发现了一种利用纯CSS来实现滑动特效的方法。

HTML部分
演示这个效果只需要一个元素，类似于下面这样的：

 

<div class="slider">需要滑动(显示隐藏)的内容,内容长度随意,class当然也可以自定义名字啦!</div>

 

CSS部分

在看到效果之前,让我们设置一些很简单的属性：overflow-y 以及 CSS animation 属性:

.slider {
	overflow-y: hidden;
	max-height: 500px; /* 预估的最大高度 */

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

现在事情变得有趣了： 漂亮的效果是使用 max-height属性实现的。我们给元素设置一个合理的缺省值，然后创建另一个class把 max-height 设置为0,然后,元素就实现滑动效果了。

.slider.closed {
	max-height: 0;
}

经过一些调试修正,我真的喜欢 cubic-bezier 这个时间轴过渡效果函数,当然也可能存在更好的动画方法。到这一步，我们还需要做的就是在合适的时候切换元素的closed CSS类。

不完美之处
那么问题来了,如果元素的高度是100px，或者10万px呢?这种情况下就很不协调,因为元素不是固定高度。
此时有两种可选思路：第一就是承认失败并使用CSS框架。第二条路是使用JavaScript检测DIV的高度,并注入"max-height"属性到stylesheet，则动画效果也会很完美。
最后请记住： 如果设置 max-height 为100%，将会很不可靠,虽然最大宽度可以这样设置，但高度不可以。

如果你找到更好的解决方案,请一定记得联系我！