为何添加条件transition后CSS反向过渡效果失效？

这本质是CSS过渡的状态一致性要求导致的：

• CSS过渡生效的核心前提是：元素在状态切换的两个端点（比如未选中状态和:checked状态）都必须有合法且可被浏览器识别的transition属性定义。
• 如果你只在:checked状态下单独设置transition，那么当从:checked切回未选中状态时，元素的transition会恢复到初始样式（可能是默认的none，或者你初始样式里根本没定义）。浏览器在这个切换过程中，发现其中一端没有过渡规则，就会直接跳过过渡逻辑，执行样式突变。
• 哪怕你给:checked的transition和初始状态的属性值完全一致，只要是分开在两个状态选择器里定义，也可能因为CSS规则的优先级或解析顺序问题，导致浏览器在状态切换时无法正确衔接过渡逻辑——因为初始状态的transition没有被持续应用在元素上。

• 把transition属性定义在元素的基础样式中（也就是不带状态限定的选择器里），而不是只放在:checked状态下。如果需要自定义反向过渡效果，再在:checked状态下重新定义transition，这样两个状态都有合法的过渡规则，浏览器就能正确计算正向和反向的过渡动画。
• 举个简单的正确示例：

  /* 基础样式：定义默认正向过渡规则 */
  .toggle-box {
    width: 120px;
    height: 60px;
    background-color: #ddd;
    transition: all 0.3s ease; /* 基础过渡，保证初始状态有规则 */
  }
  
  /* :checked状态：自定义反向过渡效果 */
  #toggle-input:checked + .toggle-box {
    background-color: #2196F3;
    transition: all 0.6s ease-in-out; /* 反向过渡的自定义参数 */
  }
  

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