为什么按钮先隐藏而切换滑块延迟隐藏，如何实现多元素同时消失？

你给.slider和.slider:before设置的transition: .4s默认会作用于所有支持过渡的CSS属性，visibility属于支持过渡的属性范畴。所以当你给toggle元素设置visibility: hidden时，会触发0.4秒的过渡，toggle需要等过渡结束才会完全消失；而按钮没有设置过渡规则，修改visibility会立即生效，二者就出现了消失不同步的问题。

方案1：限制transition作用范围（推荐） #

修改CSS中的transition规则，仅指定你需要动画的属性，不包含visibility即可，原有toggle的切换动画不会受影响：

.slider {
  /* 替换原有transition: .4s */
  -webkit-transition: background-color .4s;
  transition: background-color .4s;
  /* 其余原有样式保持不变 */
}

.slider:before {
  /* 替换原有transition: .4s */
  -webkit-transition: -webkit-transform .4s, content .4s;
  transition: transform .4s, content .4s;
  /* 其余原有样式保持不变 */
}

方案2：统一隐藏过渡（适合接受整体延迟的场景） #

如果你可以接受点击后两个元素延迟0.4秒再一起消失，只需要给按钮也加上对应过渡规则即可：

.btns {
  transition: visibility .4s;
  /* 其余原有样式保持不变 */
}

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