loader-WotW를 사용하여 커밋 단추 만들기

이번 주 소부품 시리즈의 두 번째 부분을 보십시오.
이번에는 제출 단추를 만드는 과정을 보여 드리겠습니다. 이 단추는 로더 프로그램으로 변환되어 제출을 확인합니다.
이 작은 부품의 영감은 다음과 같다.
this

준비 작업

오늘날의 작은 위젯에 대해 우리는 및 vue.js 을 사용하여 애니메이션을 진행할 것이다.이 두 라이브러리는 모든 항목에서 가져올 수 있는 cdn 링크가 있습니다.

토온암 HTML 구조

이 작은 위젯의 표시는 매우 간단합니다. 우리는 용기 하나만 필요로 합니다. 우리의 Vue 실례는 그 안에 설치될 것입니다. 그 중에서 단추 하나와 몇 개의 SVG 동그라미는 애니메이션을 불러오는 데 사용됩니다.

<div id="submit-button" class="submit-container">
  <div class="submit-btn">
    <span>Submit</span>    
  </div>

  <!--  grey circle  -->
  <svg class="loader-svg">
    <path stroke="#CCCCCC" fill="none" stroke-width="4" d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5"></path>
  </svg>

  <!--  green circle  -->
  <svg class="loader-svg">
    <path stroke="#20BF7E" fill="none" stroke-width="4" d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5"></path>
  </svg>
</div>

이제 버튼 스타일을 이러한 CSS 규칙과 일치시키기 시작합니다.

.submit-container {
  position: relative;
  margin: 80px;
}

.submit-btn {
  width: 100px;
  color: #20BF7E;
  font-size: 20px;
  font-family: Arial;
  text-align: center;
  text-decoration: none;
  padding: 10px 20px 10px 20px;
  border: solid #20BF7E 4px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 25px;
  transition: background-color .3s, color .3s;
}

.submit-btn:hover {
  background-color: #20BF7E;
  color: white;
}

녹색 배경과 흰색 글꼴 사이의 색을 교환할 수 있는 정지 애니메이션이 있는 단추가 있습니다.또한 25px 경계 반경 속성을 주의하십시오. 단추가 원형으로 바뀌어야 할 때 매우 중요합니다.

상호 논리

Vue 인스턴스를 초기화하기 전에 버튼의 상태를 확인하고 싶습니다.우리는 정지를 무시할 수 있다. 왜냐하면 우리의 CSS가 이미 이 문제를 해결했기 때문이다. 이것은 우리에게 세 가지 상태를 남겼다. 클릭, 불러오기, 불러오기.이러한 문제를 처리하려면 다음과 같이 하십시오.

new Vue({
  el: '#submit-button',
  data: {
    clicked: false,    
    loading: false,
    loaded: false
  }
})

"왜 세 개의 부울 값이 세 개의 값을 가진 문자열이나 숫자가 아닙니까?"라고 물어볼 수도 있습니다.왜냐하면 그들은 서로 배척하지 않기 때문이다. 다시 말하면 단추는'클릭'할 수도 있고, 동시에'불러올 수도 있다.

클릭 상호작용

애니메이션을 클릭할 준비를 할 때, 우리는 먼저 단추를 위한 CSS 규칙을 만들어야 한다. 단추가 눌렸을 때, 그것은 원으로 변환된다. 정확하게 말하면 50px x 50px의 원 (25px의 경계 반경을 기억하십니까?)문제는 채우기를 선언했기 때문에 단추의 경계를 보상해야 하기 때문에 우리는 약간의 수학 지식을 필요로 한다.

.submit-btn {
  ... other rules
  /* more CSS transitions for the props we need to animate */
  transition: width .3s, margin .3s, background-color .3s, color .3s;
}
.submit-btn.round {
  margin-left: 50px;
  border-color: #CCCCCC;
  background: white;

  /*  circle should be 50px width & height */
  /* borderLeft + paddingLeft + paddingRight + borderRight  */
  /* 4 + 20 + 20 + 4 = 48 + 2 = 50 */
  width: 2px; 
  /* borderTop + paddingTop + paddingBottom + borderBottom  */
  /* 4 + 10 + 10 + 4 = 28 + 22 = 50 */
  height: 22px;
}

이제 Vue에 단추를 연결할 수 있습니다. 우선 클릭을 방법에 연결합니다. round 클래스를 계산 속성에 연결합니다. 단추를 눌렀을 때 텍스트를 제출해야 합니다.

...
<div 
  @click="clickedSubmit" 
  :class="buttonClass"
  class="submit-btn">
    <span v-show="!clicked">Submit</span>  
...

그리고 우리 js에서:

...
methods: {
  clickedSubmit () {
    this.clicked = true
  }
},
computed: {
  buttonClass () {
    if (this.clicked) {
      return 'round'
    }
    return ''
  }
}

간단하죠?지금은 까다로운 부분이다.

적재

우리의 단추가 둥글게 변한 후에 우리는 SVG 원을 위에 놓아야 한다. 왜?,HTML 테두리는 우리가 원하는 방식으로 애니메이션을 설정할 수 없지만 SVG는 가능합니다!
이제 이 CSS로 원의 위치를 일치시킵니다.

.loader-svg {
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: 50px;
  width: 50px; 
  height: 50px; 
  transform-origin: 25px 25px 25px;
}

그리고 두 SVG 동그라미는 단추가 불러오기 시작할 때 표시할 수 있도록 이 vue를 연결합니다.

  <!--  grey circle  -->
  <svg v-if="loading" class="loader-svg">
    ...
  </svg>

  <!--  green circle  -->
  <svg v-if="loading" class="loader-svg">
    ...
  </svg>

애니메이션을 불러오기 시작하기 위해 단추 애니메이션이 언제 끝날지 알아야 합니다. 에 따라 "transitionend"이벤트를 사용할 수 있습니다.
Vue에서 이 이벤트에 탐지기를 추가하려면 제출 버튼에 대한 참조가 있어야 합니다. 이 줄을 버튼 HTML에 추가합니다.

<div class="submit-btn" 
  ref="submit-btn"
  ...
>

다음과 같이 clickedSubmit 메서드에서 참조할 수 있습니다.

...
clickedSubmit () {
  this.clicked = true    
  this.$refs['submit-btn']
    .addEventListener("transitionend", this.animateLoader, false);
}
...

애니메이션이 끝나면 animateLoader 메서드가 트리거되므로 다음 메서드를 만듭니다.

animateLoader () {
  this.loading = true
  this.$refs['submit-btn']
    .removeEventListener("transitionend", this.animateLoader, false);
  // TODO animate circles
}

이것은 loading 로고를true로 설정하고 이전에 추가된 탐지기를 삭제합니다.

MDN 웹 문서 녹색 동그라미 설정 애니메이션

다음 부분에서 우리는 stroke-dasharray 및 stroke-dashoffset 속성의 을 사용할 것이다.
기교가 역할을 발휘하기 위해서stroke-dasharray는 반드시 원의 둘레를 하나의 값으로 해야 한다. 그것을 계산하기 위해서 우리는 우리의 기하학적 노트로 돌아갈 수 있다. 공식은 pi곱하기 원의 직경이다.
우리의 너비는 50px이기 때문에 3.1416 * 50 = ~157 이다.또한 새로운 Vue 데이터 변수에 stroke-dashoffset 바인딩합니다.

...
<!--  green circle  -->
<svg v-if="loading" class="loader-svg">
  <path stroke="#20BF7E" fill="none" stroke-width="4" d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5" 
  stroke-dasharray="157" :stroke-dashoffset="loaderOffset">
  </path>
</svg>
...

이제 Vue 인스턴스에서 데이터 객체에 loaderOffset 속성을 선언하고 같은 값157으로 초기화합니다.

data: {
  clicked: false,    
  loading: false,
  loaded: false,
  loaderOffset: 157
}

완료되면 TweenLite를 사용하여 로드된 프로그램의 애니메이션을 설정할 수 있습니다.
우리는 TweenLite.to() 방법을 사용하여 2초 안에 loaderOffset 속성을 초기값에서 0으로 삽입합니다.
애니메이션 제작이 완료되면 onComplete 갈고리는 completeLoading 방법을 실행하고 그 중에서 loading 및 loaded 속성을 설정합니다.

...
animateLoader () {
  this.loading = true
  this.$refs['submit-btn']
    .removeEventListener("transitionend", this.animateLoader, false);

  // animate the loaderOffset property,
  // on production this should be replaced 
  // with the real loading progress
  TweenLite.to(this, 2, {
    loaderOffset: 0, // animate from 157 to 0
    ease: Power4.easeInOut,
    onComplete: this.completeLoading // execute this method when animation ends
  })
},
completeLoading () {
  this.loading = false
  this.loaded = true
}
...

SVG 애니메이션 기법 로드 상태

마지막 부분에서 우리는 단추를 불러올 때 사용할 다른 CSS 규칙만 만들 수 있습니다.

.submit-btn.loaded {
  color: white;
  background-color: #20BF7E;
}

그리고 buttonClass 계산 속성도 이런 상황을 처리해야 한다.

...
buttonClass () {
  if (this.loaded) {
    return 'loaded'
  }

  if (this.clicked) {
    return 'round'
  }

  return ''
}
...

우리는 이미 이러한 속성에 대해 CSS 전환을 성명했기 때문에 다른 일을 할 필요가 없다.
이제 최종 결과!
이것은 이번 주 두 번째 작은 부품이다.
지난번 검사 안 하셨으면
또한 다음 주 특정 위젯을 보려면 설명 섹션에 게시하십시오.