使用JavaScript触发过渡效果的方法

使用 JavaScript 触发过渡效果的方法

CSS 过渡效果可以为网页增加动态和交互性。通过使用 JavaScript 触发 CSS 过渡效果，我们可以更灵活地控制过渡的触发时机、速度和结束后的操作。下面将详细介绍如何使用 JavaScript 触发过渡效果，并附上示例代码。

1. 监听事件并改变元素样式

要触发一个 CSS 过渡效果，我们需要先监听某个事件（比如点击按钮），然后在事件处理函数中改变元素的样式。这里以改变元素的宽度为例：

---- ---------------
------- ------------------ --------------

---- -
  ------ ------
  ------- ------
  ----------------- ----
  ----------- ----- -- -----
-

----- --- - -------------------------------
----- ------ - ----------------------------------

-------------------------------- ---------- -
  -- ---------------- --- ---- -
    --------------- - ----
  - ---- -
    --------------- - --------
  -
---

在上面的代码中，我们首先获取了 #box 和 #button 元素，并添加了一个点击事件监听器。当用户点击按钮时，如果 #box 的宽度不为 0，则将其宽度设为 0；否则将其宽度设为 100px。由于 #box 的 CSS 样式中定义了 transition: width 1s ease，因此它的宽度会以 1 秒钟的时间缓慢改变。

2. 使用类名切换样式

上面的示例代码虽然可以触发过渡效果，但是每次改变样式都需要手动设置元素的属性，这样显得不够优雅。更好的方式是使用类名切换样式。

---- -------- -----------------------
------- ------------------ --------------

---- -
  ------ ------
  ------- ------
  ----------------- ----
  ----------- ----- -- -----
-

-------------- -
  ------ --
-

----- --- - -------------------------------
----- ------ - ----------------------------------

-------------------------------- ---------- -
  ----------------------------------
---

在上面的代码中，我们给 #box 元素添加了一个起始样式 class="expanded"，并在 CSS 中定义了另外一个样式 .collapsed，这个样式将 #box 的宽度设为 0。当用户点击按钮时，通过调用 classList.toggle() 方法，我们可以轻松地在 #box 上切换两种样式，从而触发过渡效果。值得注意的是，在 CSS 样式表中必须为 .collapsed 定义过渡效果才能生效。

3. 处理过渡结束事件

有时候，我们需要在动画结束后进行一些操作，比如显示/隐藏元素。可以通过监听 transitionend 事件的方式，实现在动画结束后执行回调函数的操作。

---- -------- -----------------------
------- ------------------ --------------

---- -
  ------ ------
  ------- ------
  ----------------- ----
  ----------- ----- -- -----
-

-------------- -
  ------ --
-

----- --- - -------------------------------
----- ------ - ----------------------------------

-------------------------------- ---------- -
  -- ------------------------------------- -
    ----------------------------------
  - ---- -
    -------------------------------
  -
---

------------------------------------- ---------- -
  -- ------------------------------------- -
    ----------------- - -------
  - ---- -
    ----------------- - --------
  -
---

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/1010