Day14. AnimatedNavigation

 

HTML

<button class="icon" id="toggle">

<div class="line line1"></div>

<div class="line line2"></div>

</button>

토글 버튼 line1 과 line2를 만들어서 각가의 변화를 이용해 형태를 바꿀 것.

 

CSS

nav ul li {

transform: rotateY(0deg);

opacity: 0;

transition: transform 0.6s linear, opacity 0.6s linear;

}

nav.active ul li {

opacity: 1;

transform: rotateY(360deg);

}

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.

transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다.

프로퍼티설명기본값

 

transition-property	트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다	all
transition-duration	트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
transition-timing-function	트랜지션 효과를 위한 수치 함수를 지정한다.	ease
transition-delay	프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
transition	모든 트랜지션 프로퍼티를 한번에 지정한다 (shorthand syntax)

 

nav.active .icon .line1 {

transform: rotate(-765deg) translateY(5.5px);

}

nav.active .icon .line2 {

transform: rotate(765deg) translateY(-5.5px);

}

 

트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 

2D 트랜스폼은 프로퍼티값으로 변환함수(transform function)를 사용한다. 변환함수는 다음과 같다.

transform function설명단위

translate(x,y)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.	px, %, em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다.	px, %, em 등
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다.	px, %, em 등
scale(x,y)	요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다.	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.	0과 양수
skew(x-angle,y-angle)	요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다.	+/- 각도(deg)
skewX(x-angle)	요소를 X축으로 x 각도만큼 기울인다.	+/- 각도(deg)
skewY(y-angle)	요소를 Y축으로 y 각도만큼 기울인다.	+/- 각도(deg)
rotate(angle)	요소를 angle만큼 회전시킨다.	+/- 각도(deg)

 

 

 

JS

const toggle = document.getElementById("toggle");

const nav = document.getElementById("nav");

 

햄버거 불러오기

nav바 불러오기 

 

toggle.addEventListener("click", () => {

nav.classList.toggle("active");

});

 

 

toggle 을 click 하면 

 

nav에 active 넣기