trick:CSS 3+checkbox实现JQuery的6个基本动画效果

喜欢ヅ旅行 2022-08-05 02:27 53阅读 0赞

在JQuery中，有六个基本动画函数：show()/hide()、fadeIn()/fadeOut()、slideUp()/slideDown()。这篇文章，就利用CSS3+checkbox实现这六个基本动画。

### show()/hide()的实现 ###

show()/hide()的实现主要控制元素的display属性。  
html:

<div id="box">
        <input type="checkbox" id="sh"/>
        <label for="sh">show/hide</label>
        <div id="shbox">
            点击上面的show/hide实现show()/hide()
        </div>
    </div>

css:

#box{ position:relative; }
    #box *:not(#shbox){ display:inline-block; }
    input{ position:absolute; left:-10000000px; }
    :checked~#shbox{ display:none; }
    label{ width:100px; height:30px; line-height:30px; text-align:center; border:1px solid green; position:absolute; left:0px; cursor:pointer; border-radius:5px; }
    #shbox{ background:#ccc; color:red; width:200px; height:200px; border:1px solid blue; box-sizing:border-box; padding:50px; position:absolute; top:50px; }

运行结果：[https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/][https_jsfiddle.net_dwqs_1LykzL2f_1_embedded_result]

### fadeIn()/fadeOut()的实现 ###

fadeIn()/fadeOut()的实现主要是控制元素的opcity属性。html依旧采用上面的，修改css如下：

:checked~#shbox{ opacity:0; }

fadeIn()/fadeOut()可以控制渐显/渐退的速度，同样给\#shbox添加transition属性可以模拟这个效果：

#shbox{ transition:opacity 2s; }

运行效果：[https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/][https_jsfiddle.net_dwqs_2txfyr1e_embedded_result]

### slideUp()/slideDown()的实现 ###

slideUp()/slideDown()通过改变元素的高度来实现上卷和下拉。html依旧采用上面的，css修改如下：

:checked~#shbox{ height:0px; }
    #shbox{ background:#ccc; overflow-y:hidden; color:red; width:200px; height:200px; box-sizing:border-box; transition:all 2s; position:absolute; top:50px; }

\#shbox添加了 overflow-y:hidden,是为了连文本也实现隐藏，不然，\#shbox里面的文本仍然会显示； transition实现一个过渡;同时去掉了border属性。  
运行结果：[https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/][https_jsfiddle.net_dwqs_xyu58nu8_3_embedded_result]

### 总结 ###

*  主要技巧是利用checkbox（或radio）的checked的属性
 *  对于常见隐藏元素的方法有如下五种：  
    
    
    1.  display:none; //不占空间
    2.  height:0px;
    3.  opacity:0;
    4.  position:absolute;left:-11111111px;
    5.  visibility:hidden; //占据空间  
        张大大对这方面有更详细的解释：[关于CSS隐藏元素的一些方法][CSS]

原文链接：[http://www.ido321.com/1560.html][http_www.ido321.com_1560.html]

[https_jsfiddle.net_dwqs_1LykzL2f_1_embedded_result]: https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/
[https_jsfiddle.net_dwqs_2txfyr1e_embedded_result]: https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/
[https_jsfiddle.net_dwqs_xyu58nu8_3_embedded_result]: https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/
[CSS]: http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/
[http_www.ido321.com_1560.html]: http://www.ido321.com/1560.html