opacity+visibility+transition组合代替jquery 的fadeIn ,fadeOut

来源：互联网发布：软件体系结构评估文档编辑：程序博客网时间：2024/05/16 14:25

.div {  visibility: hidden;  opacity: 0;  transition: visibility 0s linear 0.5s,opacity 0.5s linear;}.div:hover {  visibility: visible;  opacity: 0.5;  transition-delay: 0s;}

在jquery里，简单调用$('xx').fadeIn();就可完成对element的效果，但是我要求就是使用css3来完成能吗？当然！

在早之前我们会使用以上的代码来完成fade的效果，可现在不需要这么麻烦了

div {  visibility: hidden;  opacity: 0;  transition: all 0.5s linear;}div:hover {  visibility: visible;  opacity: 0.5; }

这样就简单多了，不用了解这么多，就在css里说明要在hover时，给上要的效果，有transition来声明要有过渡就可以了

细节与原理

在现代的游览器里，只需给div一个过渡就可以了，在hover时，div：hover也会拥有过渡效果。

如果你要求在hover时，来停个2秒，在离开时直接完成效果，这也可以

div {  visibility: hidden;  opacity: 0;  transition: all 0.5s linear;}div:hover {  visibility: visible;  transition:all 0.5s linear 2s; }

当移动点在element上，会直接使用div hover的css，而离开是会使用原本的css。如果hover没有过渡的css，会使用div的过渡css。

原文链接：http://www.lxway.com/48542662.htm

0 0