点击切换按钮（滑块）动画

#项目需求

项目需要实现一个点击切换按钮，并且还需要有样式。

##话不多说直接上效果图 这里用到的是scss样式

##这里是css和vue的语法 js通过变量控制点击，不多赘述。

css有一个需要注意的地方：因为文字是通过定位添加的，点击切换的时候会点击不到下面的滑块。所以需要添加

pointer-events: none;

这行代码的作用的样式穿透，这样就可以点击到下面的label了。

##核心的css样式

input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 0.8646rem;
  height: 0.1875rem;
  background: #E8E8E8;
  display: block;
  border-radius: 0.1875rem;
  position: relative;
  border: 0.0052rem solid #758B95;
}

label:after {
  content: '';
  position: absolute;
  top: -0.0104rem;
  left: -0.0052rem;
  width: 0.4479rem;
  height: 0.1927rem;
  background: #3385FF;
  border-radius: 0.15625rem;
  transition: 0.3s;
  border: 0.0052rem solid #758B95;
}

input:checked + label {
  background: #E8E8E8;
}

input:checked + label:after {
  left: calc(100% - 0.0052rem);
  transform: translateX(-100%);
}

label:active:after {
  width: 0.15625rem;
}

直接粘贴上去就可以了。可以自己修改下点击的频率，滑块的大小等。