用js实现css动画
使用 JavaScript 实现 CSS 动画
JavaScript 可以通过操作 DOM 元素的样式或类名来实现 CSS 动画效果。以下是几种常见的方法：
直接修改元素的 style 属性
通过 JavaScript 直接修改元素的 style 属性来触发动画效果。例如，实现一个简单的移动动画：
const box = document.getElementById('box');
box.style.transition = 'transform 0.5s ease';
box.style.transform = 'translateX(100px)';动态添加或移除 CSS 类
通过切换类名的方式触发 CSS 动画。首先定义 CSS 动画类：
.animate {
animation: slide 1s forwards;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}然后使用 JavaScript 动态添加类：
const box = document.getElementById('box');
box.classList.add('animate');使用 Web Animations API
Web Animations API 是原生支持的 JavaScript API，可以直接控制动画：
const box = document.getElementById('box');
box.animate(
[
{ transform: 'translateX(0)' },
{ transform: 'translateX(100px)' }
],
{
duration: 1000,
easing: 'ease-in-out',
fill: 'forwards'
}
);监听动画事件
可以通过监听 animationend 或 transitionend 事件实现动画链式调用：
const box = document.getElementById('box');
box.addEventListener('animationend', () => {
console.log('Animation ended');
});使用 GSAP 等动画库
对于复杂动画，可以使用 GSAP、Anime.js 等专业动画库：
gsap.to("#box", {
x: 100,
duration: 1,
ease: "power2.out"
});注意事项
- 性能优化：优先使用
transform和opacity属性，这些属性可以通过 GPU 加速。 - 浏览器兼容性：某些新特性（如 Web Animations API）可能需要 polyfill。
- 动画队列：避免同时触发过多动画导致性能问题。
通过以上方法，可以灵活地使用 JavaScript 控制 CSS 动画，实现丰富的交互效果。
