库尔勒网站建设电话,安顺市哪里可以做网站,牡丹江免费信息网,常州建设安全员报名网站一、前言
手撸系列又来了#xff0c;这次咱们来撸一个Switch开关组件#xff0c;废话不多说#xff0c;咱们立刻发车。
二、使用效果 三、实现分析
首先我们先不想它的这个交互效果#xff0c;我们就实现“不合格”时的一个静态页面#xff0c;静态页面大致如下#x…一、前言
手撸系列又来了这次咱们来撸一个Switch开关组件废话不多说咱们立刻发车。
二、使用效果 三、实现分析
首先我们先不想它的这个交互效果我们就实现“不合格”时的一个静态页面静态页面大致如下 3.1、静态页面
html结构如下 div classswitch-box !-- 整个组件的最外层 --div classswitch-handle/div!-- 小球 --div classswitch-content !-- 小球下面的内容 --span classbuhege不合格/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 classswitch-boxdiv classswitch-handle/divdiv classswitch-content onclickclick1()!-- 新增代码 --span classbuhege不合格/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 classswitch-boxdiv classswitch-handle/divdiv classswitch-content onclickclick1()span classhege合格/spanspan classbuhege不合格/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[classhege] {transform: translate(-30px, 0);} 四、最后
好啦今天的手撸系列就完事了关于switch开关组件有更好的想法的话欢迎评论区里讨论那么下次再见喽
最后
为大家准备了一个前端资料包。包含54本2.57G的前端相关电子书《前端面试宝典附答案和解析》难点、重点知识视频教程全套。 有需要的小伙伴可以点击下方卡片领取无偿分享
