纯CSS滑动效果 - html/css语言栏目：html.css - 自学

如果能避免使用 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%，将会很不可靠,虽然最大宽度可以这样设置，但高度不可以