隐藏自定义复选框时出现3秒严重延迟问题求助

我之前也碰到过类似的闹心情况——自定义复选框跟着父元素一起被设置隐藏，结果父div秒消失，复选框却要卡个3秒才不见！

先看你给出的触发代码：

document.getElementById("clickHide").addEventListener('click', function (){ 
  document.getElementById("hide").style.visibility = 'hidden'; 
});

问题根源 #

这种延迟基本都是因为你的自定义复选框CSS里加了过渡（transition）或者动画（animation）。visibility属性本身是可以被过渡的，或者复选框的其他样式（比如透明度、变形）的过渡还在执行，导致它没跟着父元素同步消失。

几个可行的解决办法 #

• 最快方案：换成display: none
visibility: hidden只是让元素不可见，但它还占着布局空间，而且会触发过渡；而display: none会直接把元素从布局里移除，不会有任何过渡延迟，瞬间消失：

  document.getElementById("clickHide").addEventListener('click', function (){ 
    document.getElementById("hide").style.display = 'none'; 
  });
  

  注意：之后要显示的话，记得把display改回原来的布局值（比如block、inline-block这类）。

• 如果必须用visibility：强制取消过渡
  给父元素加个类，同时在CSS里强制让复选框取消所有过渡并立刻隐藏：
  CSS代码：

  #hide.hidden .fancy-checkbox {
    transition: none !important;
    visibility: hidden !important;
  }
  

  JS代码改成加类：

  document.getElementById("clickHide").addEventListener('click', function (){ 
    document.getElementById("hide").classList.add('hidden'); 
  });
  

• 从根源解决：检查复选框的CSS
  打开你的自定义复选框样式代码，找找有没有类似transition: visibility 0.3s ease或者针对其他属性的过渡设置，把这行删掉，或者调整过渡的触发条件，让父元素隐藏时不会触发复选框的过渡动画。

总结 #

优先试试display: none，简单粗暴见效快；如果因为布局需求必须保留visibility，就用强制取消过渡的方法。一般这样就能解决复选框残留的问题了。

内容的提问来源于stack exchange，提问作者Rachel Dockter