小程序自定义switch滑块开关

  <checkbox-group name="checkbox">
      <view>
        <label class="btnOutside {{checkedSwitch==true?'rightOut':''}}" bindtap="checkChange">
          <view class="btnInside"></view>
        </label>
      </view>
  </checkbox-group>

js:

data: {
    checkedSwitch:true,//开关控制
  },
//方法
checkChange:function(e){
    var that = this;
    that.setData({
      checkedSwitch:!that.data.checkedSwitch
    })
  },

css:

/* switch滑块 */
.btnOutside{
  display: inline-block;
  width:90rpx;
  height: 50rpx;
  background-color: #fff;
  border-radius: 25rpx;
  border:2rpx solid #D0D0D0;
  box-sizing: border-box;
  position: relative;
  animation:leftOut 0.2s linear;
}
.btnInside{
  width:48rpx;
  height: 48rpx;
  background-color: #fff;
  border-radius: 50%;
  border:2rpx solid #D0D0D0;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: -2rpx;
  animation:leftIn 0.2s linear;
}
.rightOut .btnInside{
  border:2rpx solid #04BE02;
  left:40rpx;
  animation:rightIn 0.2s linear;
}
.rightOut{
  background-color: #04BE02;
  animation:rightOut 0.2s linear;
}
@keyframes rightIn{
  from{border:2rpx solid #D0D0D0;
  left:-2rpx;}
  to{border:2rpx solid #04BE02;
  left:40rpx;}
}
@keyframes leftIn{
  from{border:2rpx solid #04BE02;
  left:40rpx;}
  to{border:2rpx solid #D0D0D0;
  left:-2rpx;}
}
@keyframes rightOut{
  from{background-color: #fff;}
  to{background-color: #04BE02;}
}
@keyframes leftOut{
  from{background-color: #04BE02;}
  to{background-color: #fff;}
}
/* switch滑块结束 */