纯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%，将会很不可靠,虽然最大宽度可以这样设置，但高度不可以

补充：web前端 , HTML/CSS  ,