preview

demo预览

checkbox10

description

1.依然是通过分别定义 开、关 两个动画，考虑过只用单一动画配合 revese 让动画反过来，似乎行不通。

2.不支持 em ; 请用 rem, vw, px, rpx

scss

/* html
<div class="checkboxWrapper">
    <input type="checkbox" value="" id="myCheckbox" name="slide" checked>
    <label for="myCheckbox">
    </label>
</div>
*/

* { padding: 0; margin: 0; box-sizing: border-box; }
*::before, *::after{ box-sizing: border-box; }

body {
  margin: 60px;
  background-color: #202020;
}

$checkboxSize: 40px; /* 不支持 em ; 请用 rem, vw, px, rpx*/
$checkboxWidthTimes: 2.2;
$checkboxFontSizeTimesForON: 0.8;
$checkboxFontSizeTimesForOFF: 0.5;
$checkboxFontSizeForON: $checkboxSize * $checkboxFontSizeTimesForON;
$checkboxFontSizeForOFF: $checkboxSize * $checkboxFontSizeTimesForOFF;
$checkboxWidth: $checkboxWidthTimes * $checkboxSize;
$checkboxColorForOFF: #444249;
$checkboxColorForON: #89c2da;
$checkboxBorderColor: #3b6a7d;
$checkboxFontColorForOFF: #3b6a7d;
$checkboxFontColorForON: #444249;

$checkboxContentForOFF: "OFF";
$checkboxContentForON: "ON";
$interspace: 4px; /* 按钮与背景边框间隙大小 */
$checkboxBorderSize: 2px;
$togglingTimeCost: 0.4s;

@keyframes toggleOpen {
  0% {left: $interspace; width: $checkboxSize;}
  50% {left: calc(#{$checkboxWidth} - #{$checkboxSize} + #{$interspace}); width: $checkboxSize; background-color: $checkboxColorForOFF; content: ""}
  100% {left: $interspace; width: $checkboxWidth; background-color: $checkboxColorForON; content: "ON"}
}

@keyframes toggleClose {
  0% {left: $interspace; width: $checkboxWidth; background-color: $checkboxColorForON; content: "ON"}
  50% {left: calc(#{$checkboxWidth} - #{$checkboxSize} + #{$interspace});  width: $checkboxSize; background-color: $checkboxColorForOFF; content: ""}
  100% {left: $interspace; width: $checkboxSize;}
}

.checkboxWrapper {
  width: $checkboxWidth;
  height: $checkboxSize;
  position: relative;

  & label {
    display: block;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: calc(#{$checkboxWidth} + 2 * #{$interspace});
    height: calc(#{$checkboxSize} + 2 * #{$interspace});
    box-sizing: content-box;
    border-radius: $checkboxWidth;
    transition: all $togglingTimeCost ease;
    border: $checkboxBorderSize solid $checkboxColorForOFF;
    line-height: $checkboxSize;
    text-align: center;

    &::before {
      content: $checkboxContentForOFF;
      display: block;
      position: absolute;
      right: $interspace;
      top: $interspace;
      font-size: $checkboxFontSizeForOFF;
      width: $checkboxWidth * 0.5;
      height: $checkboxSize;
      color: $checkboxColorForOFF;
    }

    &::after {
      content: "";
      width: $checkboxSize;
      height: $checkboxSize;
      background-color: $checkboxColorForOFF;
      border-radius: 2 * $checkboxSize;
      color: $checkboxFontColorForON;
      position: absolute;
      font-size: $checkboxFontSizeForON;
      top: $interspace;
      left: $interspace;
      animation: toggleClose $togglingTimeCost both;
    }
  }

  & input:checked + label{
    border-color: $checkboxColorForON;
    &::before {
      content: "";
    }
    &::after{
      animation: toggleOpen $togglingTimeCost both;
    }
  }

  & input {
    display: none;
  }
}

素材参考：https://codepen.io/cl0udc0ntr0l/pen/xhBtF