바닐라 JS setTimeout(): 잘못된 동작 식별

Question

HTML, CSS, Vanilla JavaScript로 작성된 햄버거 메뉴에 애니메이션이 있습니다.

예상 결과

햄버거 메뉴 버튼을 클릭하면 다음 이벤트가 발생해야 합니다.

햄버거 메뉴 아이콘을 클릭하는 경우:

1. main 旋转 180° 并在 2000ms 상단 가장자리의 높이가 감소되었습니다
2. 에 2000ms 通过后，菜单出现，汉堡包图标变为 X

종료 버튼을 클릭하는 경우:

1. 메뉴를 가리려면 페이지를 180° 더 회전하세요
2. 숨겨진 메뉴: display: none;
3. 종료 버튼을 다시 햄버거 아이콘으로 변환

실제로 일어난 일

가장 큰 문제는 12-14행의 settimeout로 인해 버튼을 종료할 수 없다는 것입니다. 더 나은 이해를 위한 코드 조각은 다음과 같습니다.

으아아아 으아아아 으아아아

Answer 1

exit 클릭이 애니메이션 없이 원래 상태로 되돌아간다는 의미라면 .move-away 类上定义了 transition 속성을 배치하고 종료 클릭 시 즉시 제거했기 때문입니다.

애니메이션이 양방향으로 작동하도록 하려면 이 스타일을 transition: all 2000ms escape-in​​-out; 移至 main(CSS 파일의 14번째 줄) 지정해야 합니다.