我怎样才能使我的CSS切换状态改变更流畅，例如用过渡?

Question

我已经在CSS中创建了一个开关:

jQuery( document ).ready( function ( $ ) {
$( document ).on( 'click', '.checkbox-toggle-wrapper .checkbox-toggle', function () {
$( this ).toggleClass( 'enabled' );
} )
} );

.checkbox-toggle-wrapper {
margin-right: 12px;
margin-top: 5px;
margin-left: 1px;
}
.checkbox-toggle-wrapper .checkbox-toggle:not(.enabled)::before {
right: auto;
left: 0;
}
.checkbox-toggle-wrapper .checkbox-toggle:not(.enabled) {
border-color: #999;
background-color: #999;
}
.checkbox-toggle-wrapper .checkbox-toggle {
height: 16px;
width: 32px;
border: 2px solid #00695c;
background-color: #00695c;
display: inline-block;
text-indent: -9999px;
border-radius: 10em;
position: relative;
margin-top: -1px;
vertical-align: text-top;
cursor: pointer;
}
.checkbox-toggle-wrapper .checkbox-toggle::before {
content: "";
display: block;
width: 16px;
height: 16px;
background: #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-toggle-wrapper">
<span class="checkbox-toggle enabled"></span>
</div>

我现在正在寻找一种方法，使一切更顺利一点。我试过设置过渡:transition: all .3s，但这似乎不起作用。什么好主意吗?

Answer 1

用这个代替:

.checkbox-toggle-wrapper .checkbox-toggle:not(.enabled)::before {
right: 100%;
transform: translateX(100%);
}

要确保你可以应用右移和转换

jQuery(document).ready(function($) {
$(document).on('click', '.checkbox-toggle-wrapper .checkbox-toggle', function() {
$(this).toggleClass('enabled');
})
});

.checkbox-toggle-wrapper {
margin-right: 12px;
margin-top: 5px;
margin-left: 1px;
}
.checkbox-toggle-wrapper .checkbox-toggle:not(.enabled)::before {
right: 100%;
transform: translateX(100%);
}
.checkbox-toggle-wrapper .checkbox-toggle:not(.enabled) {
border-color: #999;
background-color: #999;
}
.checkbox-toggle-wrapper .checkbox-toggle {
height: 16px;
width: 32px;
border: 2px solid #00695c;
background-color: #00695c;
display: inline-block;
text-indent: -9999px;
border-radius: 10em;
position: relative;
margin-top: -1px;
vertical-align: text-top;
cursor: pointer;
transition:0.3s all;
}
.checkbox-toggle-wrapper .checkbox-toggle::before {
content: "";
display: block;
width: 16px;
height: 16px;
background: #fff;
position: absolute;
top: 0;
right: 0;
border-radius: 100%;
transition:0.3s all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-toggle-wrapper">
<span class="checkbox-toggle enabled"></span>
</div>