滑動門（Sliding Doors）效果是一種常見的用于制作按鈕、導航菜單等元素的技術。它可以通過使用 CSS 和 JavaScript 結合實現。下面是一個使用 JavaScript 實現滑動門效果的示例：
HTML：
<div class="sliding-door"><div class="left"></div>
<div class="right"></div>
<a href="#">Button</a>
</div>
CSS：
.sliding-door { position: relative;
display: inline-block;
overflow: hidden;
}
.left, .right {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: #ccc;
transition: transform 0.3s ease-in-out;
}
.left {
left: 0;
}
.right {
right: 0;
transform: translateX(100%);
}
a {
display: block;
width: 100%;
height: 100%;
line-height: 2rem;
text-align: center;
color: #fff;
text-decoration: none;
}
JavaScript：
const slidingDoor = document.querySelector('.sliding-door');const left = document.querySelector('.left');
const right = document.querySelector('.right');
slidingDoor.addEventListener('mouseenter', () => {
left.style.transform = 'translateX(0)';
right.style.transform = 'translateX(-100%)';
});
slidingDoor.addEventListener('mouseleave', () => {
left.style.transform = 'translateX(-100%)';
right.style.transform = 'translateX(100%)';
});
在上述示例中，我們首先定義了一個包含左半部分和右半部分的滑動門容器（.sliding-door）。然后使用 CSS 將左右兩個部分定位到合適的位置，并設置過渡效果。最后，通過 JavaScript 監聽鼠標進入和離開事件，來觸發滑動門效果的展開和收起。
當鼠標進入 .sliding-door容器時，我們將左側部分移動回原始位置（translateX(0)），同時將右側部分向左移出視圖（translateX(-100%)）。當鼠標離開容器時，我們將左側部分向左移出視圖（translateX(-100%)），同時將右側部分向右移出視圖（translateX(100%)）。
這樣就實現了簡單的滑動門效果。你可以根據實際需求和設計進行調整和擴展，添加更多樣式和交互效果。
