手撸一个Switch开关组件

一、前言

手撸系列又来了，这次咱们来撸一个Switch开关组件，废话不多说，咱们立刻发车。

二、使用效果

三、实现分析

首先我们先不想它的这个交互效果，我们就实现“不合格”时的一个静态页面，静态页面大致如下：

3.1、静态页面

html结构如下：

 <div class="switch-box"> <!-- 整个组件的最外层 --><div class="switch-handle"></div><!-- 小球 --><div class="switch-content"> <!-- 小球下面的内容 --><span class="buhege">不合格</span></div></div>

css样式如下：

 .switch-box {position: relative;box-sizing: border-box;width: 94px;height: 32px;overflow: hidden;border-radius: 40px;background-color: #FF5735;}.switch-handle {position: absolute;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;top: 50%;transform: translate(0, -50%);}.switch-content {width: 100%;height: 100%;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-end;color: #FFFFFF;font-size: 16px;padding-right: 10px;}

3.2、小球滚动

静态页面我们现在是有了，我们现在先想办法让它动起来，最常见的办法就是改变小球的transform样式，代码如下：

 let startStatus = '不合格';function click1 (){let handle = document.querySelector('.switch-handle');if (handle && startStatus == '不合格'){// 向右平移handle.style.transform = 'translate(64px, -50%)';startStatus = '合格';return}if (handle && startStatus == '合格'){// 向左平移handle.style.transform = 'translate(0, -50%)';startStatus = '不合格';return}}

html结构如下：

 <div class="switch-box"><div class="switch-handle"></div><div class="switch-content" onclick="click1()"><!-- +++++新增代码 --><span class="buhege">不合格</span></div></div>

现在我们实现了小球位置的改变（效果如下），但是我们发现，现在小球的位置都是瞬间就改变了，没有任何的过渡效果，这样给用户的感觉像是交互不太好的感觉。

添加过渡效果：

 .switch-handle {position: absolute;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;top: 50%;transform: translate(0, -50%);transition: all .3s; +++++++++ 新增加的代码}// 其余代码都不变

添加过渡效果后的效果如下（明显的丝滑）：

3.3、改变底色

这块没啥好说的，就是当小球的位置发生改变后，背景颜色也要跟着相应改变，代码如下：

 function click1 (){let handle = document.querySelector('.switch-handle');// ++++++新增代码let contentBackground = document.querySelector('.switch-box');if (handle && startStatus == '不合格'){handle.style.transform = 'translate(64px, -50%)';startStatus = '合格';// ++++++++ 新增代码contentBackground.style.background = '#18B681';return}if (handle && startStatus == '合格'){handle.style.transform = 'translate(0, -50%)';startStatus = '不合格';contentBackground.style.background = '#FF5735';return}}

效果如下：

3.4、改变文字

这个跟改变背景色其实也差不多，就是小球滚动时，动态的改变innerHTML，代码如下：

// 其余代码都一样，核心代码如下：
if (handle && startStatus == '不合格'){document.querySelector('span').innerHTML = '合格';return
}
if (handle && startStatus == '合格'){document.querySelector('span').innerHTML = '不合格';return
}

效果现在是这样的：

这么看起来"文字"也是瞬间就改变，我们也想要一个文字之间的过渡效果，"合格"把"不合格"给挤掉，或者"不合格"把"合格"挤掉。

为了完成这样的效果，那么此时我们就必须将这2个状态文字都在html里预制上，这也是使用过渡样式的前提，最后呢，通过 transform 与 overflow的配合，完成最后的效果，具体思路如下：

初始化为"不合格"的状态，当点击触发时，需要将"合格"平移至容器内，将"不合格"平移至 容器外
此时的状态为"合格",当点击再次触发时，需要将"合格"还原至原来的位置，将"不合格"平移至 容器内

最终代码如下：

 let startStatus = '不合格';function click1 (){let handle = document.querySelector('.switch-handle');let contentBackground = document.querySelector('.switch-box');let hege = document.querySelector('.hege');let buhege = document.querySelector('.buhege');if (handle && startStatus == '不合格'){handle.style.transform = 'translate(64px, -50%)';startStatus = '合格';hege.style.transform = 'translate(10px, 0)';buhege.style.transform = 'translate(52px, 0)';contentBackground.style.background = '#18B681';return}if (handle && startStatus == '合格'){handle.style.transform = 'translate(0, -50%)';startStatus = '不合格';hege.style.transform = 'translate(-30px, 0)';buhege.style.transform = 'translate(0, 0)';contentBackground.style.background = '#FF5735';return}}

html结构如下：

 <div class="switch-box"><div class="switch-handle"></div><div class="switch-content" onclick="click1()"><span class="hege">合格</span><span class="buhege">不合格</span></div></div>

css如下：

 .switch-box {margin-left: 500px;margin-top: 100px;position: relative;box-sizing: border-box;width: 94px;height: 32px;overflow: hidden;border-radius: 40px;background-color: #FF5735;}.switch-handle {position: absolute;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;top: 50%;transform: translate(0, -50%);transition: all .3s;}.switch-content {width: 100%;height: 100%;box-sizing: border-box;display: flex;align-items: center;justify-content: space-between;color: #FFFFFF;font-size: 16px;padding-right: 10px;}span {font-size: 14px;transition: all .3s;}span[class="hege"] {transform: translate(-30px, 0);}

四、最后

好啦，今天的手撸系列就完事了，关于switch开关组件有更好的想法的话，欢迎评论区里讨论，那么下次再见喽

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。

有需要的小伙伴，可以点击下方卡片领取，无偿分享