[jQuery] Count-Up Animation 개발일지 (09.23~10.01)

1. Count-Up Animation (v.0.1-2015.09.23)

[기본구조]
- total 값을 받아와 그만큼 <span>으로 숫자들을 줄 세운 뒤 position:relative top값을 위로 올리면서 애니메이션을 주는 구조

- 한 번에 여러값을 넘길 수도 있음 (ex. countUp(5);)

[부족한점]

- total 값이 매우 클 경우 <span> 태그가 매우 많이 생김. dom이 무거워 짐

- total overflow가 발생하지 않을 것이라고 생각하고 만듦

[디버그] http://s.codepen.io/mmt-zinee/debug/pjEJNV?

2. Count-Up Animation (v.0.2-2015.09.24)

[기본구조]

- 입력받은 값 만큼 <span>태그를 생성한 뒤, setTimeout으로 시간차를 둔 후 애니메이션 실행

[부족한점]

- setTimeout로 시간차를 준다하더라도 span이 엄청나게 많이 생긴다면 dom이 그려지기 전에 애니메이션이 실행될 수 있다.

- view에서 지나간 span들을 삭제하는 방법

- span을 최소로 활용하는 방법을 찾아볼 것

[디버그] http://s.codepen.io/mmt-zinee/debug/epdGaa?

[참고] CSS3 Transition 타이밍 이슈

3. Count-Up Animation (v.0.3-2015.09.30)

[기본구조]

- <span>을 positon:absolute로 잡고 -110 / 0 / 110px (위로 올라간/보여지는/아래에 있는) 이렇게 세가지 상태로 설정

- 지나간 <span>은 삭제, 새로 카운트 될 숫자가 있는 <span>은 매번 새로 생성

doUp()

ㄴ makeSpan()

1) <span style="top:0px"> 아래에 <span style="top:110px"> 추가

ㄴ countUp()

2) <span style="top:0px">→<span style="top:-110px"> 되면서 위로 올라가며 hide (data-pos="up-hide")

3) <span style="top:110px">→<span style="top:0px"> 되면서 아래에 있던 것이 위로 올라오며 show (data-pos="up-show")

ㄴ removeSpan()

4) <span style="top:-110px"> 올라가서 가려진 것 remove

[부족한점]

- 타이밍 이슈를 setTimeout으로 해결(reflow hack not working)

- 다중 값 처리는 구현하지 못함

[디버그] http://s.codepen.io/mmt-zinee/debug/YyNNZG?

[참고]

- Triggering reflow for CSS3 transitions

- Reflow 원인과 마크업 최적화 Tip