css3+visbibilty解决淡入淡出问题

时间:2024-01-15 14:13:38
  .fade{
visibility: hidden;
opacity: ;
transition: all .5s;
}
.fade.on {
visibility: visible;
opacity: ;
}

原理:基于css3中的transition支持visibilibity这个特殊的非数值型过渡的属性,而且visibilibity:hidden虽占用空间,但完全不可见,不会影响当前位置的元素效果,完美解决使用display所存在的问题。

visibility过渡理解: 在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”