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

本文主要是介绍trick:CSS 3+checkbox实现JQuery的6个基本动画效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在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/

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的属性
• 对于常见隐藏元素的方法有如下五种：
  
  1. display:none; //不占空间
  2. height:0px;
  3. opacity:0;
  4. position:absolute;left:-11111111px;
  5. visibility:hidden; //占据空间
     张大大对这方面有更详细的解释：关于CSS隐藏元素的一些方法

原文链接：http://www.ido321.com/1560.html

这篇关于trick:CSS 3+checkbox实现JQuery的6个基本动画效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---