위 챗 애플 릿 switch 구성 요소 사용 상세 설명

본 논문 의 사례 는 여러분 에 게 위 챗 애플 릿 switch 구성 요소 의 실현 코드 를 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같 습 니 다.
효과 도

HTML

<div class="switch-list">
 <span class="fui-fr">  switch  </span>
 <input class="fui-switch" style="color:rgb(255, 0, 0);" type="checkbox" checked>
</div>
<div class="switch-list">
 <span class="fui-fr">  switch  </span>
 <input class="fui-switch" style="color:rgb(76, 216, 100);" type="checkbox" checked>
</div>
<div class="switch-list">
 <span class="fui-fr">    switch  </span>
 <input class="fui-switch" style="color:rgb(76, 216, 100);" type="checkbox" checked disabled>
</div>
<div class="switch-list">
 <span class="fui-fr">  switch  --- </span> 
 <input class="fui-switch" style="color:blue" type="checkbox" checked>
</div>
<div class="switch-list">
 <span class="fui-fr">  switch  --- </span> 
 <input class="fui-switch" style="color:blue" type="checkbox">
</div>

CSS

.switch-list{
 padding: .5rem;
}
.fui-switch{
 position: relative;
 width: .87rem;
 height: .5rem;
 z-index: 10;
 display: inline-block;
 outline: medium;
 border: 1px solid #dfdfdf;
 border-radius: .25rem;
 background-color: #dfdfdf;
 -webkit-appearance: none;
 -moz-appearance: none;
 vertical-align: middle;
}
.fui-switch:checked{
 border-color: currentColor;
 background-color: currentColor;
}
.fui-switch::after,.fui-switch::before{
 content: "";
 position: absolute;
 height: .44rem;
 top: 0;
 left: 0;
 border-radius: .25rem;
 -webkit-transition: -webkit-transform .3s;
 transition: -webkit-transform .3s;
 transition: transform .3s;
 transition: transform .3s,-webkit-transform .3s;
}
.fui-switch:before {
 width: .84rem;
 background-color: #fdfdfd;
}
.fui-switch:checked:before {
 -webkit-transform: scale(0);
 transform: scale(0);
}
.fui-switch:after {
 width: .44rem;
 background-color: #fff;
 box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.fui-switch:checked:after {
 -webkit-transform: translateX(.4rem);
 transform: translateX(.4rem);
}
.fui-switch[disabled] {
 opacity: .5;
}
.fui-fr{font-size: .3rem;vertical-align: middle;}

remy 를 실현 하 는 JS

(function(win,factory){
 factory(win);
 window.addEventListener('resize',function(){factory(win)},false);
}(window,function(win){
 var width = document.documentElement.clientWidth;
 width = width > 750 ? 750 : width;
 document.documentElement.style.fontSize = width / 7.5 + 'px';
}));

주의 하 다.
여기 1rem 750 의 psd 설계 도 는 100 px 를 대표 합 니 다.
switch 의 전환 애니메이션 은 CSS 3 의 transition 속성 을 통 해 이 루어 집 니 다.
주로 switch 의 after 이동 을 제어 하고 before 의 확대 축소 애니메이션 입 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.