javascript - CSS动画帮助。仅以一种方式播放

Question

所以我正在尝试为我的网络应用构建一个类似 ios-7 的开关。我完成了 60%。我应用了一个动画代码，可以在旋钮来回移动时拉伸(stretch)旋钮。但问题是只有在关闭开关时才会出现拉伸(stretch)效果。自己看这里iOS 7 style switch

该标记使用一个通过将其不透明度设为 0 来隐藏的复选框。

标记:

    <input type = "checkbox" name= "toggle" id="toggle">
    <label for= "toggle"></label>      

CSS动画代码:

@-webkit-keyframes strSqu {
   0% { width : 27px; }
   50% { width : 30px ;}
   100% { width : 27px; }
}

应用于:

input#toggle:checked + label:before {
    margin-left: 20.8px;
     border :1px solid rgba(201, 201, 201, 0.21);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    -webkit-animation-name : strSqu;
    -webkit-animation-duration : 400;
}

在处理伪元素方面我还是菜鸟。我错过了什么吗？

Answer 1

这里的问题是您不能对一个元素应用相同的过渡两次，否则它会在第二次被忽略。这就是@JoshuaCarmody 提出的解决方案不起作用的原因。相反，如果您像这样定义第二个相同的动画:

@-webkit-keyframes strSqu2 {
   0% { width : 27px; }
   50% { width : 60px ;}
   100% { width : 27px; }
}

并将其应用于未选中状态:

input#toggle + label:before{
    content : " ";
    display : block;
    background-color : #fff;
    border :1px solid #4dc15e;

    height : 27px;
    width : 27px;
    border-radius: 15px;
    transition : all 400 cubic-bezier(.6,-0.22,.18,1.02) ;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.21);
    -webkit-animation-name : strSqu2;
    -webkit-animation-duration : 400;
}

它会起作用的。这对我来说似乎违反直觉，尤其是在动画以相同方式开始和结束的情况下，但它确实有效。