Question

我已经创建了一个简单的复选框开关，这里是一个JSFiddle：http://jsfiddle.net/aseVX正如您所注意到的，当您点击小圆圈跳转时，我试图让它顺利地从左向右移动向左。我尝试添加CSS转换，但没有使它工作。我做错了什么想法？

/*Checkbox Switch*/
 .switch p, .switch label {
    display: inline;
}
.switch label {
    margin-left: 10px;
}
.switch label > span {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid #A6A6A6;
    width: 50px;
    height: 30px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    -ms-transition: all .15s linear;
    -o-transition: all .15s linear;
    transition: all .15s linear;
}
.switch input[type="checkbox"]:checked + span {
    background-color: #316C94;
    border: 1px solid rgba(0, 0, 0, 0.4);
}
.switch span span {
    background-color: #fff;
    border: 1px solid #A6A6A6;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 2px;
    left: 2px;
    cursor: pointer;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -webkit-transition: all .15s ease;
    -moz-transition: all .15s ease;
    -ms-transition: all .15s ease;
    -o-transition: all .15s ease;
    transition: all .15s ease;
}
.switch label > span:hover span {
    width: 30px;
}
.switch input[type="checkbox"]:checked + span span {
    right: 2px;
    left: auto;
    border: none;
}
/*Checkbox Switch > Disabled*/
 .switch input[type="checkbox"]:disabled + span {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #A6A6A6 !important;
}
.switch input[type="checkbox"]:disabled + span span, .switch input[type="checkbox"]:disabled + span span:hover {
    background-color: #fff !important;
    border: 1px solid #A6A6A6 !important;
    width: 24px !important;
}

Answer 1

正如Adrift在评论中所说，你不能动画到auto的状态

但是，既然您说宽度已设置，您可以设置为适合宽度的左侧值设置动画

.switch input[type="checkbox"]:checked + span span {
    left: 23px;
    border: none;
}

Demo

此外，我在选中复选框并添加了left时添加了border-radius位置

不需要-moz-border-radius的前缀版本，因为border-radius从来就不是一件事，不支持!important的浏览器也不会支持转换或类似的任何事情

此外，不需要!important，如果选择器具有更高的优先级或相同的优先级但是在样式表的下方，则会自动覆盖样式。这是因为CSS是一种级联语言，这意味着如果可以的话，样式将应用于以前的样式。应该尽量避免使用{{1}}，因为当项目变大时会导致问题

CSS Transition未应用

1 个答案: