html - 添加 Div 时单选按钮动画不起作用

Question

我正在尝试设置一组单选按钮的样式，并且还制作了动画。你会看到我是否删除了 <div>与 class="group55"从代码来看，动画效果很好。当我重新添加该元素时，似乎我拥有的 CSS 不再被识别。我究竟做错了什么？最终目标是拥有“group55”<div>包围单选按钮组，仍然让动画继续工作。

.toggle1:checked ~ .panel1 {
  left: 0px;
}

.panel1 {
  transition:all 500ms ease;
  width: 300px;
  height: 100px;
  border: 1px solid black;
  position: absolute;
  left: -300px;
}

<div class="group55">
<input type="radio" class="toggle1" id="toggle1" name="group" checked/>
<input type="radio" class="toggle2" id="toggle2" name="group" />


<div class="panel1">
panels 1
</div>

(也可在 jsFiddle 获得。)

Answer 1

这行不通，因为您需要将面板作为输入的同级，以使同级选择器 (~) 工作。

修复 HTML:

<div class="group55">
<input type="radio" class="toggle1" id="toggle1" name="group" checked />
<input type="radio" class="toggle2" id="toggle2" name="group" />
    <div class="panel1">
panels 1
</div>
</div>

检查: https://jsfiddle.net/lmgonzalves/85f57nd8/1/