未應用CSS過渡

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

演示版

此外，在選中復選框並將其懸停時，我在left位置添加了更改

不需要border-radius的前綴版本，因為-moz-border-radius從來都不是問題，並且不支持border-radius瀏覽器將不支持過渡或類似的功能

另外，如果選擇器具有更高的優先級或相同的優先級，但在樣式表的更下方時，則不需要!important ，樣式將自動被覆蓋。 這是因為CSS是一種級聯語言，這意味着樣式將適用於以前的樣式。 !important應該盡量避免，因為它會在項目變大等問題時引起問題