在 HTML 中，我們可以使用 CSS3 過渡效果來美化頁面，使網站更加動感。而使用 JS 觸發 CSS3 過渡效果，可以使頁面更加豐富。本文將探討如何使用 JS 觸發 CSS3 過渡效果。

/* 定義過渡效果 */
.transition {
transition: all 2s ease-in-out;
}
/* 定義懸停效果 */
.hover {
transform: scale(1.2);
}

首先，我們需要在 CSS 中定義過渡效果和懸停效果。上面的代碼片段定義了一個名為.transition的 CSS 類，它具有 2 秒的過渡效果。我們還定義了一個名為.hover的 CSS 類，它會在鼠標懸停時應用在元素上并將其放大。

// 獲取元素
const element = document.querySelector('.element');
// 添加懸停事件
element.addEventListener('mouseover', () =>{
element.classList.add('hover', 'transition');
});
// 移除懸停事件
element.addEventListener('mouseout', () =>{
element.classList.remove('hover');
});

接下來，我們需要使用 JS 獲取要應用過渡效果的元素，并添加懸停事件監聽。當鼠標懸停在元素上時，我們將.hover和.transitionCSS 類添加到元素上。當鼠標離開時，我們只需移除.hover類即可。

這樣一來，我們就可以使用 JS 觸發 CSS3 過渡效果了。當我們在網頁上懸?；螂x開指定元素時，它將緩慢地變化大小。這是一個簡單而有效的 CSS3 過渡效果，我們可以根據需要自由玩耍，創造更加炫酷的過渡效果。