javascript classList로 html class 조정하기(8)
javascript classList로 html class 조정하기(8) — #javascript #class 웹사이트 디자인 소개 및 학습목표 디자인소개 패스트 캠퍼스 "최성일"강사...
#SVG UI#Naver Blog
#javascript #class
웹사이트 디자인 소개 및 학습목표
디자인소개
패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리한 글입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.
처음부터 끝까지 하나 하나 손코딩 하는 모습을 보여드릴 것이며. 이전글을 꼭 보셔야 이해가 되는 글입니다.
학습목표
- classList를 활용하여 버튼을 클릭할 때마다. 클래스를 추가/제거하는 모션을 만들어 본다.
사용되는언어
JS
- classList : class="on", "up", "down"을 원하는 패널에 추가/제거한다.
JS
현재패널 위로 보내고 다음패널 올리기
| current\_item.classList.add('up'); current\_item.classList.remove('on'); panel\_li\[next\_index\].classList.add('on'); | classList현재(0번)패널에 .up추가하여 위로올리기현재(0번)패널에 .on제거하여 안보이게 하기다음패널(1번)패널에 .on추가하여 보이게 나타내기 |
|---|
- 이렇게 설정하면 현재 패널은 올라가고 다음 패널이 올라온다. 괜찮은 UI이지만, 뭔가 밋밋하다.
- 코드상으로도 .up을 제거해주지 않았기 때문에 나중에는 올라가있던 패널이 내려오는 모션이 생긴다.
- .down을 활용하여 더욱 역동적이게 구현하자.
다음패널 내린상태에서 올리기
| panel\_li\[next\_index\].classList.add('down'); panel\_li\[next\_index\].classList.remove('down'); panel\_li\[next\_index\].classList.add('on'); | classList다음패널(1번)이 내려간 상태에서 올라오게 Ui 구현.down을 입력하면 패널이 내려감(참고)이후 .down을 제거(불투명도0이라 안보임)이후 다음패널(1번)에 .on주기 //.on부여시 아래에서 정면으로 부드럽게 회전하도록 걸어뒀음 |
|---|
.up제거 및 setTimeout으로 시간차 두기
| setTimeout(()=>{ panel\_li\[next\_index\].classList.remove('down'); panel\_li\[next\_index\].classList.add('on'); panel.querySelector('.up').classList.remove('up'); },500) | SetTimeout(함수,delay)시간차를 두지 않으면 모션이 동작이 안된다.(너무빠름)0.5s의 텀을두고 트랜지션 발생하도록 설정했음다음패널(1)번이 아래있다가 정면으로 올라오는 모션 완성querySelector로 .up요소를 찾고 제거해줘야 연구동작이 가능하다. |
|---|
복습
짚어갈 포인트
- .down으로 내린 상태에서 올려야 한다.
- setTimeout을 줘야 모션이 제대로 완성된다.
다왔다...! 이제 SVG구현만 남았다!