css實現switch開關,js控制

最近做項目遇到個switch,我還是百度解決的，但是我不能解決就完事啊，我得學會，然後和大家分享出來。

對就是這樣非常的好使，也非常的美觀，下面咱就擼代碼。

<input class="switch switch-anim" type="checkbox" checked>//html部分

下面是css部分，有些地方我會解釋下的

.switch {
            width: 57px;
            height: 28px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #fdfdfd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 20px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }
        .switch:before {
            content: '';
            width: 26px;
            height: 26px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .switch:checked {
            border-color: #64bd63;
            box-shadow: #64bd63 0 0 0 16px inset;
            background-color: #64bd63;
        }
        .switch:checked:before {
            left: 30px;
        }
        .switch.switch-anim {
            transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
        }
        .switch.switch-anim:before {
            transition: left 0.3s;
        }
        .switch.switch-anim:checked {
            box-shadow: #64bd63 0 0 0 16px inset;
            background-color: #64bd63;
            transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
        }
        .switch.switch-anim:checked:before {
            transition: left 0.3s;
        }

-webkit-appearance : none 是用來移除原生控件樣式
transition是css3的過渡效果
cubic-bezier 這個是貝塞爾曲線有個可視化的網站（http://cubic-bezier.com）

好了，css完事就來點js，去控制這個switch開關

function checkNum(){
        if($('.switch-anim').prop('checked')){
            console.log("選中");
        }else{
            console.log("沒選中");
        }
    }

當然不要忘了去調用，這個函數哦

<input class="switch switch-anim" onchange="checkNum()" type="checkbox" checked />