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

页面导航:首页 > 网络编程 > JavaScript > trick:CSS 3+checkbox实现JQuery的6个基本动画效果

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

来源: 作者: 时间:2016-01-23 10:23 【

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

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

show()/hide()的实现

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


点击上面的show/hide实现show()/hide()

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/

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/

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/

总结

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

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<