CSS转换：之后无效

Question

我正在尝试创建自定义切换复选框。

这是未选中的时候

以及何时选择

除了CSS转换之外没有问题，即使我正在使用切换，切换也会跳转：

    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;

我在这里放了一个JSfiddle：http://jsfiddle.net/awLdbzec/4/

Answer 1

您无法从/到值为auto的属性进行转换 在您的示例中，您将left值从0更改为auto，将right值从auto更改为0

您可以使用left

尝试设置0属性的动画，从(100% - 24px)到calc()

.switch input:checked + span:after {
    background-color: #fff;
    left: -webkit-calc(100% - 24px);       
    left: calc(100% - 24px);
}

/* for the hover effect */   
.switch input:checked + span:hover:after {
    width: 30px;
    left: -webkit-calc(100% - 30px);
    left: calc(100% - 30px);
}

示例：http://jsfiddle.net/awLdbzec/5/