如果能避免使用Script就实现DOM元素动画效果,那我非常乐于不用JS去实现。
因为更高效,而且不需要JS框架来一步步处理,代码更美观优雅。
用纯来实现很难确定的一个特效是 上下滑动——当向上滑的时候内容渐变隐藏,向下滑动内容渐变显示。
之所以难以实现的原因是你可能不能获得内容的高度。
在经历了多种多样的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框架。第二条路是使用检测DIV的高度,并注入"max-height"属性到stylesheet,则动画效果也会很完美。
最后请记住: 如果设置 max-height 为100%,将会很不可靠,虽然最大宽度可以这样设置,但高度不可以