# [JS30] Day.26 Stripe Follow Along Dropdown
###### tags: `JS30`
## 任務 Task
根據滑動到的項目顯示相對應的內容，並有背景滑動的效果。

==完成時間：20min==
## 步驟 Step
1. 監聽每個項目被 `mouseenter` 及 `mouseleave` 時觸發 `handleEnter()` 及 `handleLeave()` 。
2. `mouseenter` 時加入顯現文字的 class 使 `display: blick`、經過 150 毫秒加入更改透明度的 class，使 `opacity: 1`，以及顯現背景的 class。
3. 取得各個項目內容的位置資訊 `getBoundingClientRect()`，並更改背景的位置資訊為內容的位置資訊。
4. `mouseleave` 時移除顯現文字、更改透明度的 class，以及顯現背景的 class。
## 筆記 Note
### <font color=#337EA9>JS Element.getBoundingClientRect()</font>
* `x/left`、`y/top` 為相對於視窗左上的距離。
### <font color=#337EA9>JS Element.style.setProperty()</font>

//Syntax
Element.style.setProperty(propertyName,value);
//EX：
const body = document.querySelecot('body');
body.style.setProperty('width','100%');

### <font color=#337EA9></font>
### <font color=#337EA9></font>
## 遇到問題 Problem
:::danger
⚠️ <font color=black>Problem</font>
:::
* 快速滑動時，會造成 `setTimeout` 失效，使得一開始就有 `trigger-enter-active` 的 class。
:::info
:ok_hand: <font color=black>Revise</font>
:::
* ==原因：==

當快速滑動時，在還沒到 150 毫秒時離開項目，使`trigger-enter-active` 已經移除了，經過 150 毫秒，透明度變成 1 ，但鼠標已經離開項目了，卻沒有移除 class，所以再次 `mouseenter` 時，已經存在 `trigger-enter-active` 的 class了，造成 `setTimeOut` 失效。
* ==解決辦法：==

當過 150 毫秒時，判斷存在 `trigger-enter` 時，才加入 `trigger-enter-active` ，就不會發生只有一個 class 被移除的情況。

setTimeout(() => 
this.classList.contains('trigger-enter') &&
this.classList.add('trigger-enter-active'), 150);