如何捕获JavaScript中的CSS3动画事件

关键要点

• 通过为元素添加事件处理程序，JavaScript 可以管理 CSS3 动画，从而实现对动画的精细控制，例如按顺序播放动画。可以捕获三种类型的事件：“animationstart”、“animationiteration”和“animationend”。
• 通过使用自定义函数为所有带前缀和不带前缀的名称调用 addEventListener，可以实现这些动画事件的跨浏览器兼容性。这允许使用一行代码分配事件处理程序。
• 传递给动画侦听器函数的事件对象提供了动画名称和自动画开始以来的经过时间。这可以用来检测特定动画何时结束并执行其他代码，例如按特定顺序应用另一个 CSS3 动画。

CSS3 动画流畅且易于实现，但与 JavaScript 不同，它没有逐帧控制。幸运的是，您可以将事件处理程序应用于任何元素以确定动画状态。这允许精细控制，例如按顺序播放不同的动画。

考虑这个简单的 CSS3 动画：

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

当 enable 类应用于 ID 为 anim 的元素时，名为 flash 的动画将运行三次。每次迭代持续一秒钟，在此期间元素会淡出然后淡入。

动画发生时会触发三种类型的事件：

animationstart

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

animationstart 事件在动画第一次启动时触发。

animationiteration

anim.addEventListener("animationiteration", AnimationListener, false);

animationiteration 事件在每次新的动画迭代开始时触发，即除第一次迭代之外的每次迭代。

animationend

anim.addEventListener("animationend", AnimationListener, false);

animationend 事件在动画结束时触发。

浏览器兼容性

在撰写本文时，Firefox、Chrome、Safari、Opera 和 IE10 支持 CSS3 动画和相关的事件处理程序。此外，Opera、IE10 和 webkit 浏览器使用前缀，并为了确保万无一失而进行了一些大小写更改……

W3C 标准 Firefox webkit Opera IE10 animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd

解决前缀问题的最简单方法是使用自定义函数为所有带前缀和不带前缀的名称调用 addEventListener：

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}

现在可以使用一行代码分配跨浏览器事件处理程序：

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

事件对象

在上面的代码中，每当发生动画事件时，都会调用 AnimationListener 函数。一个事件对象作为单个参数传递。除了标准属性和方法之外，它还提供：

• animationName：CSS3 动画名称（即 flash）
• elapsedTime：自动画开始以来的时间（以秒为单位）。

因此，我们可以检测 flash 动画何时结束，例如：

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

例如，代码可以移除现有类或按特定顺序应用另一个 CSS3 动画。

查看 JavaScript 中的 CSS3 动画事件演示

演示页面显示一个按钮。单击它时，将切换“enable”类，从而启动 flash 动画。当动画事件触发时，状态会显示在控制台中。动画结束后，“enable”类将被移除，以便可以再次单击按钮。

如果您在任何有趣的项目中使用动画事件捕获，请告诉我。

(如果您喜欢阅读这篇文章，您会喜欢 Learnable；这是从大师那里学习新技能和技巧的地方。会员可以立即访问所有 SitePoint 的电子书和交互式在线课程，例如《面向现实世界的 HTML5 和 CSS3》)

(本文的评论已关闭。关于 CSS 有问题吗？为什么不在我们的论坛上提问呢？)

关于 CSS3 动画和 JavaScript 事件处理程序的常见问题解答 (FAQ)

什么是 CSS3 动画和 JavaScript 事件处理程序？

CSS3 动画是 CSS3（层叠样式表）的一项功能，允许您在不使用 JavaScript 或 Flash 的情况下为 HTML 元素设置动画。它提供了一种直接在 CSS 代码中创建简单动画的方法，无需任何其他资源。另一方面，JavaScript 事件处理程序是在 JavaScript 中的函数，当发生特定事件时会触发这些函数。这些事件可以是用户单击按钮、页面加载或动画结束等任何事件。结合使用 CSS3 动画和 JavaScript 事件处理程序可以创建动态的交互式 Web 内容。

如何将 JavaScript 事件处理程序与 CSS3 动画一起使用？

要将 JavaScript 事件处理程序与 CSS3 动画一起使用，您需要向要设置动画的 HTML 元素添加事件侦听器。此事件侦听器将在动画结束时触发 JavaScript 函数。这是一个基本示例：

anim.addEventListener("animationiteration", AnimationListener, false);

在此代码中，“animationend”是我们正在侦听的事件，它在 CSS3 动画完成时触发。

我可以将 JavaScript 事件处理程序与 CSS3 过渡一起使用吗？

是的，您可以像使用 CSS3 动画一样，将 JavaScript 事件处理程序与 CSS3 过渡一起使用。您需要侦听的事件是“transitionend”。此事件在 CSS 过渡完成后触发。

如何使用 JavaScript 控制 CSS3 动画的时间？

您可以使用“animation-delay”属性使用 JavaScript 控制 CSS3 动画的时间。此属性设置动画开始的延迟。您可以像这样在 JavaScript 中设置此属性：

#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

在此代码中，动画将在页面加载 2 秒后启动。

如何使用 JavaScript 重复 CSS3 动画？

您可以使用“animation-iteration-count”属性使用 JavaScript 重复 CSS3 动画。此属性指定应播放动画的次数。您可以像这样在 JavaScript 中设置此属性：

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

在此代码中，动画将无限期地重复。

我可以使用 JavaScript 更改 CSS3 动画的速度吗？

是的，您可以使用 JavaScript 更改 CSS3 动画的速度。“animation-duration”属性控制动画完成一个周期所需的时间长度。您可以像这样在 JavaScript 中设置此属性：

anim.addEventListener("animationiteration", AnimationListener, false);

在此代码中，动画将持续 2 秒。

如何使用 JavaScript 暂停和恢复 CSS3 动画？

您可以使用“animation-play-state”属性使用 JavaScript 暂停和恢复 CSS3 动画。此属性设置动画是正在运行还是已暂停。您可以像这样在 JavaScript 中设置此属性：

anim.addEventListener("animationend", AnimationListener, false);

在此代码中，动画将被暂停。

我可以使用 JavaScript 更改 CSS3 动画的方向吗？

是的，您可以使用 JavaScript 更改 CSS3 动画的方向。“animation-direction”属性定义动画是否应在交替周期中反向播放。您可以像这样在 JavaScript 中设置此属性：

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}

在此代码中，动画将反向播放。

如何使用 JavaScript 检测 CSS3 动画的结束？

您可以通过为“animationend”事件添加事件侦听器来使用 JavaScript 检测 CSS3 动画的结束。此事件在 CSS3 动画完成后触发。以下是如何操作：

// 动画侦听器事件
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);

我可以使用 JavaScript 更改 CSS3 动画的 animation-timing-function 吗？

是的，您可以使用 JavaScript 更改 CSS3 动画的“animation-timing-function”。此属性指定动画的速度曲线。您可以像这样在 JavaScript 中设置此属性：

if (e.animationName == "flash" &&
    e.type.toLowerCase().indexOf("animationend") >= 0) {
    ...
}

在此代码中，动画将缓慢启动，然后加速。

以上是如何捕获JavaScript中的CSS3动画事件的详细内容。更多信息请关注PHP中文网其他相关文章！