css处理transition 碰上display会无过度动画

css处理transition 碰上display会无过度动画

相信各位老铁在实现元素隐藏到显示的过度动画时，都遇到过此问题，在此记录一个解决方法，方便自己日后使用

处理过度动画无效当然可以用js写，但是感觉用js写第一是没有直接用css3方便又节省性能，第二是时间变量不好统一管理，例如初始动画时间为2s，后面项目需要动画过度时间改成0.2s，还得过去找js更改时间，很麻烦。

  /*需要opacity:0和visibility:hidden实现隐藏元素*/
  #bg{
  	/*隐藏状态下*/ 
    opacity:0;
    visibility: hidden;
    transition: 0.3s ease all;
  }
  #bg.active{
  	/*显示状态*/
    visibility: visible;
    opacity:1;
  }

本来单独用opacity也可以达到视觉上的效果，但是会遮挡住下面的dom的点击操作。但是用display属性又会破坏整个延迟效果。所以用visibility属性。当visibility为hidden是为隐藏当visibility为visible时候显示