IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

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

    dwqs发表于 2015-05-12 22:58:41
    love 0

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

    show()/hide()的实现

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

    1. id="box">
    2. type="checkbox" id="sh"/>
    3. for="sh">show/hide
    4. id="shbox">
    5. 点击上面的show/hide实现show()/hide()

    css:

    1. #box{
    2. position:relative;
    3. }
    4. #box *:not(#shbox){
    5. display:inline-block;
    6. }
    7. input{
    8. position:absolute;
    9. left:-10000000px;
    10. }
    11. :checked~#shbox{
    12. display:none;
    13. }
    14. label{
    15. width:100px;
    16. height:30px;
    17. line-height:30px;
    18. text-align:center;
    19. border:1px solid green;
    20. position:absolute;
    21. left:0px;
    22. cursor:pointer;
    23. border-radius:5px;
    24. }
    25. #shbox{
    26. background:#ccc;
    27. color:red;
    28. width:200px;
    29. height:200px;
    30. border:1px solid blue;
    31. box-sizing:border-box;
    32. padding:50px;
    33. position:absolute;
    34. top:50px;
    35. }

    运行结果:https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/

    fadeIn()/fadeOut()的实现

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

    1. :checked~#shbox{
    2. opacity:0;
    3. }

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

    1. #shbox{
    2. transition:opacity 2s;
    3. }

    运行效果:https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/

    slideUp()/slideDown()的实现

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

    1. :checked~#shbox{
    2. height:0px;
    3. }
    4. #shbox{
    5. background:#ccc;
    6. overflow-y:hidden;
    7. color:red;
    8. width:200px;
    9. height:200px;
    10. box-sizing:border-box;
    11. transition:all 2s;
    12. position:absolute;
    13. top:50px;
    14. }

    #shbox添加了 overflow-y:hidden,是为了连文本也实现隐藏,不然,#shbox里面的文本仍然会显示; transition实现一个过渡;同时去掉了border属性。
    运行结果: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隐藏元素的一些方法
    淡忘~浅思猜你喜欢

    【译】下一代选择器:CSS4

    Trick:CSS3的:target实现选项卡切换

    【译】CSS中的变量使用详解

    【译】CSS 3动画介绍

    JQuery操作元素的css样式
    无觅

    转载请注明:淡忘~浅思 » trick:CSS 3+checkbox实现JQuery的6个基本动画效果



沪ICP备19023445号-2号
友情链接