Less is More——一个input实现开关按钮

Less is More。这是20世纪30年代著名的建筑师路德维希·密斯·凡德罗说过的一句话，意思是“少即多”这是一种提倡简单，反对过度装饰的设计理念。简单的东西往往带给人们的是更多的享受。

作为程序员我们写代码何尝不是这样子呢？

腾讯WXG基础产品部的颜俊鸿在“物勒工名”，第一届前端体验大会分享了《WeUI代码设计理念》的时候提到：
1、以更少的代码实现组件；
2、减少冗余的样式；
3、简化接口。

最近在学习WeUI，发现一个很有代表性的组件——开关按钮，很好地诠释了“以更少的代码实现组件”。

一个开关按钮只用到了一个input标签。

Less is More——一个input实现开关按钮——燃烧的陈林林.jpg

首先input标签设置type="checkbox"，这样input会有checked的属性（设置或返回 checkbox是否应被选中）。这就有我们需要的两种状态，开和关。
input设置没选中状态为灰色#DFDFDF,选中为绿色#04BE02。
input中的before覆盖在input上面，未选中状态设置颜色#FDFDFD（和input设置的颜色一样），选中状态设置为transform: scale(0)。
input中的after是上面的圆球，选中状态沿X轴向右平移20px。

具体代码如下：
结构：

样式：

.weui-switch {
  -webkit-appearance: none;
          appearance: none;
}
.weui-switch {
  position: relative;
  width: 52px;
  height: 32px;
  border: 1px solid #DFDFDF;
  outline: 0;
  border-radius: 16px;
  box-sizing: border-box;
  background-color: #DFDFDF;
  -webkit-transition: background-color 0.1s, border 0.1s;
  transition: background-color 0.1s, border 0.1s;
}
.weui-switch:before{
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background-color: #FDFDFD;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1),-webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.weui-switch:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.weui-switch:checked{
  border-color: #04BE02;
  background-color: #04BE02;
}
.weui-switch:checked:before {
  -webkit-transform: scale(0);
          transform: scale(0);
}
.weui-switch:checked:after {
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}

欢迎学习交流——陈林林