不知道大家做css3动画的时候遇到过这种情景没？
用opacity实现淡入淡出的效果。噢！good！一切正常
给个栗子：
- <!DOCTYPE html>
- <html>
- <meta charset="uft-8">
- <head>
- <style>
- .div1{
- background: red;
- }
- .div2 {
- width:100px;
- height:100px;
- background:blue;
- transition:opacity 2s;
- -moz-transition:opacity 2s; /* Firefox 4 */
- -webkit-transition:opacity 2s; /* Safari and Chrome */
- -o-transition:opacity 2s; /* Opera */
- opacity: 0;
- }
- .div1:hover .div2 {
- opacity:1;
- }
- </style>
- </head>
- <body>
- <div class="div1">
- <p>请移动到红色div上</p>
- <div class="div2"></div>
- </div>
- </body>
- </html>
或者用animation，在keyframe中写也一样。这里就不写出代码了
但是难免我们会遇到这样的需求，也一定会遇到： 我们都知道opacity:0的时候，其实他还是占页面空间的，他会遮挡到他下面的层（不是视觉上）。而且绑定在他上面的一些onclick事件之类的，也同样会发生。 这时候我们想在opacity:0的时候，把他隐藏掉，用display: none。 好，那我们稍微在css中加几句，变成
- .div1{
- background: red;
- }
- .div2 {
- width:100px;
- height:100px;
- background:blue;
- transition:opacity 2s;
- -moz-transition:opacity 2s; /* Firefox 4 */
- -webkit-transition:opacity 2s; /* Safari and Chrome */
- -o-transition:opacity 2s; /* Opera */
- opacity: 0;
- display: none;
- }
- .div1:hover .div2 {
- opacity:1;
- display:block
- }
打开浏览器看一下效果先。 我擦。。。。淡入淡出的效果全没了 怎么回事。。。这简直是破坏性的作用，这也是之前做动画过程中遇到的大坑
聪明的码农们当然有办法来解决这种情况。 大家都知道visibility的效果其实跟 display 在一定程度上相似， 当然是一定程度上。 那为什么说只是一定程度上相似呢，因为它仍然是占空间的，那么这时候看官一定会说，这么用跟opacity压根没区别呀
但聪明的码农们一定又想到，这时候，他是不会遮挡到下面的层的，也就是说 他跟opacity这样的存在不同，onclick等事件是不会发生的。
我们来说下visibility， 常用到的是visible和 hidden 两个值。但也可以是数值， 等于0时相当于hidden，而只要大于0时，visibility就为visible。那我们利用这点。
- .div1{
- background: red;
- }
- .div2 {
- width:100px;
- height:100px;
- background:blue;
- transition:all 2s;
- -moz-transition:all 2s; /* Firefox 4 */
- -webkit-transition:all 2s; /* Safari and Chrome */
- -o-transition:all 2s; /* Opera */
- visibility: hidden
- }
- .div1:hover .div2 {
- visibility: visible
- }
浏览一下，会发现，这时候是会有延时隐藏的效果的。很好，又发现新东西了
那渐变的效果怎么办。。。。
聪明的码农们又想起了opacity 。。。结合起来用会怎么用呢
- .div1{
- background: red;
- }
- .div2 {
- width:100px;
- height:100px;
- background:blue;
- transition:all 2s;
- -moz-transition:all 2s; /* Firefox 4 */
- -webkit-transition:all 2s; /* Safari and Chrome */
- -o-transition:all 2s; /* Opera */
- visibility: hidden;
- opacity: 0
- }
- .div1:hover .div2 {
- visibility: visible;
- opacity: 1
- }
浏览下先。。。。！！！！一切正常了
其实，visibility会在opacity生效后再应用。比如隐藏时，先opacity变为0，再应用了visibility:hidden 这时候就隐藏起来了，相关的事件也不会发生。 看来display:none这时候被抛弃了啊
当然，有人会说visibility:hidden始终是占着页面空间的，display能够减少页面的repaint，还是要用display:none怎么做呢
聪明的码农又想到了： 先把display变成block 然后延迟transition动画的执行
当然啦 这就需要用到JS了
以上就是display和transition中发现的坑。。。。！
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索visiblity
， display
， div
， background
， visibility
， transition
， Opacity
hover延时
css3 transition、css3 transition 动画、css3 transition 抖动、css3 transition all、transition css3 实例，以便于您获取更多的相关知识。