CSS 过渡效果可以为网页增加动态和交互性。通过使用 JavaScript 触发 CSS 过渡效果，我们可以更灵活地控制过渡的触发时机、速度和结束后的操作。下面将详细介绍如何使用 JavaScript 触发过渡效果，并附上示例代码。
1. 监听事件并改变元素样式
要触发一个 CSS 过渡效果，我们需要先监听某个事件（比如点击按钮），然后在事件处理函数中改变元素的样式。这里以改变元素的宽度为例：
<div id="box"></div> <button id="button">Toggle Width</button>
#box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease;
}-- -------------------- ---- -------
----- --- - -------------------------------
----- ------ - ----------------------------------
-------------------------------- ---------- -
-- ---------------- --- ---- -
--------------- - ----
- ---- -
--------------- - --------
-
---在上面的代码中，我们首先获取了 #box 和 #button 元素，并添加了一个点击事件监听器。当用户点击按钮时，如果 #box 的宽度不为 0，则将其宽度设为 0；否则将其宽度设为 100px。由于 #box 的 CSS 样式中定义了 transition: width 1s ease，因此它的宽度会以 1 秒钟的时间缓慢改变。
2. 使用类名切换样式
上面的示例代码虽然可以触发过渡效果，但是每次改变样式都需要手动设置元素的属性，这样显得不够优雅。更好的方式是使用类名切换样式。
<div id="box" class="expanded"></div> <button id="button">Toggle Width</button>
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ----------------- ---- ----------- ----- -- ----- - -------------- - ------ -- -
const box = document.getElementById('box');
const button = document.getElementById('button');
button.addEventListener('click', function() {
box.classList.toggle('collapsed');
});在上面的代码中，我们给 #box 元素添加了一个起始样式 class="expanded"，并在 CSS 中定义了另外一个样式 .collapsed，这个样式将 #box 的宽度设为 0。当用户点击按钮时，通过调用 classList.toggle() 方法，我们可以轻松地在 #box 上切换两种样式，从而触发过渡效果。值得注意的是，在 CSS 样式表中必须为 .collapsed 定义过渡效果才能生效。
3. 处理过渡结束事件
有时候，我们需要在动画结束后进行一些操作，比如显示/隐藏元素。可以通过监听 transitionend 事件的方式，实现在动画结束后执行回调函数的操作。
<div id="box" class="expanded"></div> <button id="button">Toggle Width</button>
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ----------------- ---- ----------- ----- -- ----- - -------------- - ------ -- -
-- -------------------- ---- -------
----- --- - -------------------------------
----- ------ - ----------------------------------
-------------------------------- ---------- -
-- ------------------------------------- -
----------------------------------
- ---- -
-------------------------------
-
---
------------------------------------- ---------- -
-- ------------------------------------- -
----------------- - -------
- ---- -
----------------- - --------
-
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1010