「JavaScript 30」學習筆記（廿六）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

使滑鼠在滑進和滑出導覽列的列表元素時，產生背景的動畫效果。

筆記

選取所有導覽列的列表元素。

const triggers = document.querySelectorAll('.cool > li');

選取導覽列列表的背景元素。

const background = document.querySelector('.dropdownBackground');

選取整個導覽列元素。

const nav = document.querySelector('.top');

---

建立一個 handleEnter() 方法，以出現背景。

function handleEnter() {
    // 加上 trigger-enter 樣式到當前元素
    this.classList.add('trigger-enter');
    // 經過特定秒數後加上 trigger-enter-active 樣式，並確定 trigger-enter 樣式已經存在
    setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
    // 顯示背景
    background.classList.add('open');

    // 選取摺疊選單元素
    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
    };

    // 設置背景寬度
    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)`);
}

• getBoundingClientRect() 方法會返回元素的大小及其相對於螢幕的位置。

---

建立一個 handleLeave() 方法，以移除背景。

function handleLeave() {
    // 移除 trigger-enter 和 trigger-enter-active 樣式移除
    this.classList.remove('trigger-enter', 'trigger-enter-active');
    // 移除背景
    background.classList.remove('open');
}

---

監聽所有導覽列的列表元素，當發生 mouseenter 事件時，觸發 handleEnter() 方法。

triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));

監聽所有導覽列的列表元素，當發生 mouseleave 事件時，觸發 handleLeave() 方法。

triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));