CSS3 中 transition-duration 碰上display就会无效的解决办法

当然可以用js写,但是感觉用js写第一是没有直接用css3方便又节省性能,第二是时间变量不好统一管理,加入这次css用的2s,js也写成2s。如果项目需要css改成0.2s,还得过去找js,简直烦死。

这里用visibility代替一下


  #bg{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:99;
    opacity:0;
    visibility: hidden;
    background: rgba(0,0,0,0.2);
    transition: 0.3s ease all;
  }
  #bg.active{
    visibility: visible;
    opacity:1;
  }
本来单独用opacity也可以达到视觉上的效果,但是会遮挡住下面的dom的点击操作。但是用display属性又会破坏整个延迟效果。所以用visibility属性。


随机浏览