animated 类是 animate.css 动画库的核心组成部分，它与特定的动画效果类（如 bounce、shake、fadeout）结合使用，能够为网页元素提供丰富的预设 css 动画。它并非 bootstrap 或 jquery 的原生功能，而是通过引入 animate.css 库来实现动画效果的激活与控制。
揭秘 animated 类：Animate.css 的基石
在网页动画开发中，我们常常会遇到一些看似神奇的 CSS 类，它们能够让元素动起来。其中，animated 类就是一个典型代表。许多初学者可能会疑惑，这个类究竟来自何方，又扮演着怎样的角色？
实际上，animated 类是著名的 Animate.css 动画库的核心组成部分。它本身不定义任何具体的动画效果，而是作为一个基础类（或称“触发类”），为后续应用的具体动画类（如 bounce、shake、fadeIn 等）提供必要的通用属性和环境。这些通用属性通常包括：
animation-duration: 动画持续时间animation-fill-mode: 动画在执行前和执行后如何应用样式animation-timing-function: 动画的缓动函数
没有 animated 类，Animate.css 中定义的具体动画效果类将无法正确触发或显示。因此，它是 Animate.css 动画得以生效的先决条件。
引入 Animate.css 动画库
要使用 animated 类及其提供的各种动画效果，首先需要在项目中引入 Animate.css 库。这通常通过在 HTML 文件的
部分添加一个 标签来完成：
立即学习“前端免费学习笔记（深入）”；
Animate.css 动画示例 /* 示例样式 */ .well { width: 200px; height: 100px; background-color: lightblue; margin: 20px; display: flex; justify-content: center; align-items: center; font-size: 1.2em; border: 1px solid #ccc; } button { padding: 10px 20px; margin: 20px; font-size: 1em; cursor: pointer; } #target3 { width: 150px; height: 80px; background-color: lightcoral; margin: 20px; display: flex; justify-content: center; align-items: center; font-size: 1.2em; border: 1px solid #ccc; }我是一个盒子目标元素$(document).ready(function(){ // 示例：点击按钮触发动画 $("#animateButton").on("click", function() { // 先移除可能的旧动画类，再添加新动画类和 animated $(this).removeClass().addClass("animated bounce"); // 动画结束后移除动画类，以便下次再次触发 $(this).one('animationend webkitAnimationEnd', function() { $(this).removeClass('animated bounce'); }); }); // 示例：页面加载后自动为元素添加动画 $(".well").addClass("animated shake"); $("#target3").addClass("animated fadeOut"); // 注意：fadeOut也需要animated类 // 监听动画结束事件，以便移除动画类或执行后续操作 $(".well").one('animationend webkitAnimationEnd', function() { console.log(".well 动画结束"); // $(this).removeClass('animated shake'); // 如果需要动画只播放一次 }); $("#target3").one('animationend webkitAnimationEnd', function() { console.log("#target3 动画结束"); // $(this).removeClass('animated fadeOut').hide(); // 动画结束后隐藏元素 }); });
你可以选择使用 CDN（内容分发网络）链接，如上述示例，也可以下载 Animate.css 文件并将其放置在项目本地。
应用 animated 类与动画效果
一旦 Animate.css 库被成功引入，就可以通过为 HTML 元素添加相应的 CSS 类来应用动画。核心原则是：同时添加 animated 类和具体的动画效果类。
考虑以下示例代码片段：
// 为按钮添加弹跳动画$("button").addClass("animated bounce"); // 为类名为 "well" 的元素添加摇晃动画$(".well").addClass("animated shake"); // 为 ID 为 "target3" 的元素添加淡出动画// 注意：对于 Animate.css 的动画效果，通常都需要 animated 类作为前缀$("#target3").addClass("animated fadeOut");
在这些示例中：
$(“button”).addClass(“animated bounce”);：这行代码会找到页面中的 $(“.well”).addClass(“animated shake”);：类似地，所有类名为 well 的元素将获得 animated 和 shake 类，从而执行摇晃动画。$(“#target3”).addClass(“animated fadeOut”);：这里为 ID 为 target3 的元素添加 animated 和 fadeOut 类。fadeOut 是 Animate.css 提供的一种淡出效果，它也需要 animated 类来激活。
重要提示： 尽管在某些特定的 CSS 动画实现中，单个动画类可能独立工作，但对于 Animate.css 而言，animated 类是其所有预设动画（如 bounce、shake、fadeIn、fadeOut 等）得以正确运行的基础。如果缺少 animated 类，这些动画将不会被触发。
工作原理与注意事项
CSS @keyframes 驱动： Animate.css 库的本质是大量的 CSS @keyframes 规则。每个具体的动画类（如 bounce）都对应着一个或一组 @keyframes 规则，这些规则定义了动画在不同时间点的样式变化。animated 类则负责将这些 @keyframes 绑定到元素上，并设置动画的默认行为。动画触发与重复： 默认情况下，Animate.css 的动画只会播放一次。如果需要动画无限循环播放，可以额外添加 infinite 类，例如：element.addClass(“animated infinite bounce”);。动画控制：播放一次： 动画播放完毕后，动画类仍然存在于元素上。如果希望动画在下次触发时重新播放，需要先移除旧的动画类，再重新添加。这可以通过监听 animationend 或 webkitAnimationEnd 事件来实现。JavaScript 控制： 可以使用 JavaScript 动态添加或移除 animated 和动画效果类，以实现更精细的动画控制，例如在用户交互时触发动画。性能考量： CSS 动画通常由浏览器进行硬件加速，性能表现良好。但过度或复杂的动画仍可能消耗资源，尤其是在低性能设备上。合理使用动画，避免不必要的动画链，有助于保持页面的流畅性。兼容性： Animate.css 广泛支持现代浏览器。对于需要兼容老旧浏览器的项目，可能需要考虑添加浏览器前缀或使用其他兼容性方案。
总结
animated 类是 Animate.css 动画库不可或缺的一部分，它扮演着激活和配置动画环境的关键角色。通过理解 animated 类的作用，并结合 Animate.css 提供的丰富动画效果类，开发者可以轻松地为网页元素添加各种引人注目的动画，从而提升用户体验和页面的动态感。在实践中，务必记住同时引入 Animate.css 库，并为目标元素同时添加 animated 和具体的动画效果类，以确保动画能够正确无误地呈现。
以上就是Animate.css 动画库中的 animated 类详解与应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1584417.html
微信扫一扫 
支付宝扫一扫 
