Question

我正在尝试设置一组单选按钮，并使动画工作。你会看到我是否从代码中删除<div> class="group55"，然后动画就可以了。当我重新添加该元素时，似乎我所拥有的CSS不再被识别。我究竟做错了什么？最终的目标是拥有＆＃34; group55＆＃34; <div>围绕一组单选按钮，仍然让动画继续工作。

＆＃13;

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

＆＃13;

<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>

＆＃13;

（也可在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/

Answer 2

如果您尝试添加“group55”环绕这组单选按钮，您的动画将无效。点击此处再次查看代码the code that you wish to do 因为类“.toggle1：checked~.panel1”只有在检查“.toggle1”时才有效，并且“.toggle1”类和“.panel1”类必须在“group55”里面这样......

Click here to see the answer with another way

Answer 3

我也做过的事情是将你的面板1类的左属性设置为4px并且它起作用，因为在左右的css属性中以相反的方式工作所以当你说左-300px它实际上是左边但通常它应该是正确的。查看http://jsfiddle.net/85f57nd8/4/

＆＃13;

.toggle1:checked ~ .panel1 {
left: 0px;
}

.panel1 {
transition:all 500ms ease;
width: 300px;
height: 100px;
border: 1px solid black;
position: absolute;
left: 4px;
}

＆＃13;

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

3 个答案: