html - :after is not working 上的 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

您可以尝试使用 calc() 为 left 属性设置动画，从 0 到 (100% - 24px)

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