이번에 만들어본건 금방 만들주 알았는데...
거의 하루종일 시간이 들어갔다...
모바일에서 많이보이는 햄버그 메뉴(3자 바)를 눌렀을때
X모양으로 변하는걸 많이 봤는데
svg가 아닌 그냥 css,animate로 움직이는것도 있길래 괜찬다 생각이 들어서 만들어보기로 했다.
처음에는 animate로 rotate를 주면될주 알고 했는데...
rotate라는 속성은 없더라
그래서 구글링 시작...
찾아보니깐 transform으로 rotate하던지 아니면 jQuery패치? 를 해야 가능한거같더라...젠장
그래서 또 계속 검색하다가 새벽2시쯤... 하코사의 힘을 받아서 도움을 청했다.
햄버그에서 X로 만드는건 해결했는데 X를 햄버그로 다시 만드는데 또 문제 봉착...
각각 이벤트 사이에 딜레이를 줄라니깐 골이아프다.
역시 개발자는 엉덩이 비비는 시간으로 승부한다.
노가다 끝에 해결!!
링크:http://creatijin.dothome.co.kr/project/css/transition/icon-animate/icon.html
간단할주 알았던게 이렇게 힘들다니 ㅋㅋ 역시 나의 배움이 아직 부족한탓이다.
