slideUp, slideDown, slideLeft, slideRight 함수 구현

January 18, 2016

JQuery 함수인 slideUp / slidedDown 함수와 Accordion Menu 를 직접 구현한 예제이다.
- 코어(재귀를 통한 Animation 처리) 로직을 직접 구현해보기위한 예제이므로, 그 외 로직(DOM 처리, 조작 등)에서는 JQuery 를 사용하였다.
  See the Pen <a href='http://codepen.io/yanione/pen/wMPvLr/'>wMPvLr</a> by mohwa (<a href='http://codepen.io/yanione'>@yanione</a>) on <a href='http://codepen.io'>CodePen</a>.
- 부드러운 움직임을 위한, 다향한 Easing 기능이 추가된 예제이다.
  - 즉 Easing 을 통해 부드러운 움직임을 위한 가속도(사람은 속도에는 둔감해도 가속도에는 민감하다)를 적용할 수 있다.
```
속도에는 둔감하고 가속도에는 민감한 예를 들자면 차가 일정한 속도로 달리고 있을 때 우리는 이 차가 얼마나 빨리 움직이는 것인지 잘 모른다.
일정한 속도라면(즉, 가속도가 0이라면) 차안에서 가만히 서있을 수 있다. 하지만 급정거나 급출발하면 어떤가? 아무리 살짝(?) 급정거, 급출발을 해도 우리는 곧바로 느낄 수 있다.
우리 몸이 힘을 맞았기 때문이다. UI 애니메이션에서 easing은 이런 가속도를 매끄럽게 해주는 일을 한다.
```
  - 애니메이션-easing에-숨은-비밀
  - easing 테스트
  - easing 함수 generator
    See the Pen <a href='http://codepen.io/yanione/pen/obogvX/'>obogvX</a> by mohwa (<a href='http://codepen.io/yanione'>@yanione</a>) on <a href='http://codepen.io'>CodePen</a>.
위 slideUp / Down 함수를 응용하여 slideRight / slidedLeft 함수를 구현한 예제이다.
- 코어 로직 중 Animation 처리를 위한 속성인 height 속성이 width 속성으로 변경된점을 제외하고는 동일하다.
  See the Pen <a href='http://codepen.io/yanione/pen/adVzNo/'>adVzNo</a> by mohwa (<a href='http://codepen.io/yanione'>@yanione</a>) on <a href='http://codepen.io'>CodePen</a>.
마지막으로 Menu Animation 이 구현된 예제이다.
See the Pen <a href='http://codepen.io/yanione/pen/JGOoOX/'>JGOoOX</a> by mohwa (<a href='http://codepen.io/yanione'>@yanione</a>) on <a href='http://codepen.io'>CodePen</a>.

참고 URL