5/8 - 웹2 (9강)

5/3 - 8강

디자인삼성 2차메뉴 hover적용

[ 디자인 삼성 2차메뉴 애니메이션 효과]

주의사항: 2차메뉴 구현시 display: none;을 사용하면 transition을 사용할 수 없다.

vscode에 정리되어 있음.

1. 2차메뉴 숨기기
▷ 불투명도를 조절하여 안보이게 한다. 하지만 opacity만 적용하면 투명도만 적용된 상태이기 때문에 a태그를 사용하거나 클릭 기능이 살아있게 된다. 따라서 opacity로 구조를 감출 경우 클릭을 방지해주는 visibility: 0;을 함께 사용한다.
▷ visibility만 사용해도 투명도, 클릭방지가 되지만 애니메이션(transition)을 적용할 수 없기 때문에 애니메이션 적용을 위해선 opacity와 함께 사용해줘야 한다.
▷ visibility: visible;이 기본값이다.
▷ opacitiy:1;이 기본값이다.

opacity: 0; visibility: hidden;

2. left-nav를 가져온 후 기본값으로 돌려준다.
▷ 1차 네비바에 마우스를 가져다 댔을 때 2차 메뉴가 나와야 하기 때문에 .left-box > .left-nav를 선택한다.
(마우스를 올렸을때 원상복구 되야하기 때문)
.left-box > .left-nav:hover > .menu-2-section { opacity: 1; visibility: visible; }

3. left-box의 자식인 left-nav에 마우스를 올리면 자식인 menu-2-section에 코드 적용

 

[transition]

1. transform (변형 속성)
2. translate (변형 속성값) - x,y축으로 옮기는 것
3. transition (변형 시간 조정 속성) - 시간을 조절하여 천천히 바꿀 수 있음 (속도 조절)
▷ 코드 예시
    transform: translateY(96px);    transition: 0.3s;   =    0에서 y축으로 96px 이동하는 시간을 0.3s로 설정

***특정 조건에만 transition을 사용하면 특정조건이 일어났을때만 애니메이션이 적용되기 때문에

모든 조건에서 실행될 수 있도록 조건이 걸리지않은 선택자에 transition을 적용해야한다.