웃는 토글 컨트롤을 만든 방법 — WotW

Widget of the Week라는 시리즈의 첫 번째 게시물입니다.

이름에서 알 수 있듯이 저는 7일마다 주로 dribbles에서 UI Movement을 기반으로 하는 위젯을 만들 것입니다.

gif를 완전히 작동하는 HTML 컨트롤로 변환하는 것은 말처럼 쉽지 않기 때문에 프로세스에 대해 작성하고 까다로운 부분에 대한 솔루션 뒤에 있는 이유를 설명할 것입니다.

더 이상 고민하지 않고 이번 주 위젯은 다음 토글 컨트롤입니다.

요소 준비

먼저 위젯의 부분을 식별해야 합니다. 처음에는 컨트롤, 배경, 공 및 공 안의 얼굴을 위한 컨테이너가 필요한 것처럼 보입니다.

HTML + CSS로 거의 모든 작업을 수행할 수 있습니다. CSS 마법으로 얼굴을 만들 수 있지만 앱을 실행하고 SVG 노드를 만드는 것이 더 쉬울 것이라고 생각했습니다. 방금 스크린샷을 찍고 다시 그렸습니다.



이제 코딩을 시작할 모든 것이 있습니다.

HTML 구조

기본 구조는 다음과 같이 시작되었습니다.

<div id="widget" class="center">
  <div class="toggle-container">
    <!-- background -->
    <div class="toggle-bg"></div>

    <div class="ball-face">
      <div class="faces-container">
        <div class="faces-together">
          <!-- happy face svg -->
          <svg class="happy-face" ... />
          <!-- sleepy face svg -->
          <svg class="sleepy-face"... />    
        </div>
      </div>
    </div>
  </div>
</div>

그런 다음 스타일을 추가하기 시작했고 배경과 공면 모두에 테두리 반경을 사용했고 그라데이션과 상자 그림자는 구에 볼륨을 부여하는 데 도움이 되었습니다. 또한 모바일에서 탭할 때 나타나는 하이라이트를 제거하도록 -webkit-tap-highlight-color를 설정해야 했습니다. 그런 다음 약간의 시행착오를 거친 후 얼굴 SVG를 배치했습니다.

.center {
  margin-left: calc(50% - 75px);
  margin-top: 50px;
}
.toggle-container {
  position: relative;
  cursor: pointer;
  margin: 20px 0;
  outline:0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.toggle-bg {
  background: #D4CFD0;
  width: 150px;
  height: 70px;
  border-radius: 50px;
}
.ball-face {
  position: absolute;
  overflow: hidden;
  left: 7px;
  top: 7px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(45deg, #c6c6c6 0%,#ffffff 60%);
  box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.2);
}
.faces-container {
  position: relative;
}
.faces-together {
  position: absolute;  
  left: 0;
}
.happy-face {
  position: absolute;
  top: 18px;  
  left: -120px;
  width: 25px;
}
.sleepy-face {
  position: absolute;
  top: 27px;  
  left: 10px;
  width: 25px;
}

상호 작용 논리

컨트롤을 작동시키려면 JS 코드가 필요하므로 Vue.js를 가져와 기능을 빠르게 통합했습니다.

다음과 같이 시작하면 충분합니다.

var widget = new Vue({
  el: '#widget',
  data: {
    active: false
  },
  methods: {
    toggle () {
      this.active = !this.active
    }
  }
})

이제 다음과 같이 토글 메서드를 HTML 내부의 토글 컨트롤에 바인딩하기만 하면 됩니다.

<div id="widget" class="center"> 
  <div @click="toggle" class="toggle-container">]
    // ... rest of html

지금은 시각적인 변경 사항이 없지만 구성 요소를 검사하면 이미 작동 중이며 클릭할 때마다 활성 속성이 토글됩니다. 따라서 다음으로 할 일은 해당 속성에 따라 모양을 변경하는 것입니다.

CSS 클래스를 Vue 속성에 바인딩

먼저 토글이 '활성'일 때 적용될 CSS 규칙을 만들어야 했기 때문에 다음과 같은 클래스를 만들기 시작했습니다.

.ball-face.active {
  left: 87px;
}

그러면 볼 페이스가 즉시 오른쪽으로 이동하므로 이미 생성된 .ball-face 클래스 내부에 전환이 필요합니다.

.ball-face {
  ... other rules
  transition: left .4s ease-in-out;
}

그러면 '인-아웃' 유형의 가속(이즈) 변경으로 0.4초 안에 '왼쪽' 속성에 애니메이션이 적용됩니다. CSS의 전환과 여유가 무엇인지에 대해 자세히 알고 싶다면 this page을 확인하세요.

그런 다음 Vue 속성이 true일 때 '활성' 클래스를 HTML에 추가해야 합니다. 그렇게 하려면 다음과 같이 클래스를 바인딩해야 합니다.

<div :class="{'active': active}" class="ball-face">

'활성' 클래스를 표시하거나 숨기기 위해 Vue 속성을 바인딩하는 데 도움이 되는 콜론:class에 주목하십시오. 해당 클래스는 이미 정의된 클래스 'ball-face'에 추가됩니다.

이제 나머지 속성에 대해 동일한 작업을 시도했습니다. 내가 가진 유일한 문제는 컨테이너 배경의 배경색에 애니메이션을 적용하려고 할 때 CSS 전환이 아직 해당 속성을 지원하지 않는 것 같습니다. 두 가지 배경, 즉 회색 배경과 화려한 배경을 다른 배경 위에 배치하여 문제를 해결해야 했습니다. 색상을 전환하는 대신 불투명도에 애니메이션을 적용해야 했습니다.

면의 경우 왼쪽 속성도 애니메이션 처리한 다음 볼에 overflow: hidden을 넣었습니다. 콘텐츠를 마스킹합니다. 마스킹을 하지 않은 모습은 이렇습니다.

접근성

구성 요소에는 확인란 기능이 있으므로 MDN webdocs에 따라 액세스 가능하게 하려면 몇 가지 속성을 추가해야 합니다. 또한 'space' 버튼이 컨트롤을 토글할 것으로 예상되며 'Enter' 키도 토글해야 한다고 생각하여 다음 바인딩으로 끝냈습니다.

<label for="toggleControl">Click the sleepy face!</label>
<div @click="toggle"
   @keyup.space="toggle"
   @keyup.enter="toggle"
   :aria-checked="isChecked" 
   class="toggle-container" 
   role="checkbox" 
   tabindex="0" id="toggleControl">
     ... rest of html

그리고 이제 최종 결과!



금주의 첫 번째 위젯은 여기까지입니다. 다음 주에 특정 위젯을 보려면 댓글 섹션에 게시하세요.

다음주에 보자!

Eder Díaz에 원래 게시되었습니다.