#100DaysOfCode의 26일

반응형

안녕 여러분

오늘 자바스크립트30 26번째 영상을 완성했습니다!

프로젝트 26: 줄무늬 추적 드롭다운

출처: https://javascript30.com

 

학습:

탐색 막대를 따라 이어지는 드롭다운 요소를 설정하는 작업을 수행했습니다. 요소는 메뉴의 각 항목에 대해 사용자 정의되었습니다.

우리는 내비게이션 바를 구성하고 있는 주문되지 않은 리스트 안에 세 가지 리스트 항목을 설정했어요. 여기에는 불투명도와 표시 특성을 포함하는 드롭다운 CSS 클래스가 포함되어 있습니다. 나에게 새로운 CSS 속성은 나중에 요소 변경을 예상하도록 브라우저에 힌트를 주는 will-changes 속성입니다.

.dropdown {
      opacity: 0;
      will-change: opacity;
      display: none;
}

그런 다음 변경 사항을 제공할 두 개의 하위 클래스를 추가했습니다.

 

.trigger-enter .dropdown {
      display: block;
}
.trigger-enter-active .dropdown {
      opacity: 1;
}

스크립트 태그에는 일반적인 변수 세트를 포함하고 이벤트 수신기를 추가했습니다. 그런 다음 마우스 이벤트를 처리하고 두 개의 하위 클래스를 활성화하는 기능을 만들었습니다.

function handleEnter() {
      this.classList.add('trigger-enter');
      setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
      background.classList.add('open');

드롭다운 창을 각 요소에 맞게 사용자 정의하려면 뷰포트에서 좌표를 얻어야 했습니다. 그래서 우리는 용기의 치수를 얻기 위해 getBoundingClientReact 방법을 사용했다. 이 경우에는 드롭다운 요소와 탐색 요소를 모두 사용했습니다.

const dropdown = this.querySelector('.dropdown');
const dropdownCoords = dropdown.getBoundingClientRect();
const navCoords = nav.getBoundingClientRect();

 

적절한 좌표를 변수로 설정합니다.

const coords = {
        height: dropdownCoords.height,
        width: dropdownCoords.width,
        top: dropdownCoords.top - navCoords.top,
        left: dropdownCoords.left - navCoords.left
};

이제 setProperty 메서드 및 템플릿 리터럴을 사용하여 컨테이너 크기를 조정할 수 있습니다.

background.style.setProperty('width', `${coords.width}px`);
    background.style.setProperty('height', `${coords.height}px`);
    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);

마지막으로, 우리는 다른 기능을 사용하여 컨테이너에서 나오는 마우스를 처리했습니다.

 

function handleLeave() {
      this.classList.remove('trigger-enter', 'trigger-enter-active');
      background.classList.remove('open');
}

탐색 모음에서 마우스를 요소에서 요소로 이동하면 프로그램이 좋은 효과를 얻을 수 있습니다.