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

Less is More。这是20世纪30年代著名的建筑师路德维希·密斯·凡德罗说过的一句话，意思是“少即多”这是一种提倡简单，反对过度装饰的设计理念。简单的东西往往带给人们的是更多的享受。
作为程序员我们写代码何尝不是这样子呢？
腾讯WXG基础产品部的颜俊鸿在“物勒工名”，第一届前端体验大会分享了《WeUI代码设计理念》的时候提到：
1、以更少的代码实现组件；
2、减少冗余的样式；
3、简化接口。
【Less|Less is More——一个input实现开关按钮】最近在学习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); }

欢迎学习交流——陈林林