js实现div动画
使用CSS动画实现div动画
在HTML中创建一个div元素，并通过CSS的@keyframes规则定义动画效果。这种方式性能较好，适合简单动画。
<div class="animated-div"></div>
<style>
.animated-div {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s infinite alternate;
}
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
</style>使用JavaScript的requestAnimationFrame
对于需要更复杂控制的动画，可以使用requestAnimationFrameAPI。这个方法会在浏览器重绘之前执行回调函数，实现平滑动画。
const div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'blue';
document.body.appendChild(div);
let position = 0;
function animate() {
position += 2;
div.style.transform = `translateX(${position}px)`;
if (position < 200) {
requestAnimationFrame(animate);
}
}
animate();使用GSAP动画库
GSAP是一个专业的动画库，提供了丰富的动画功能和更好的性能控制。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<div id="gsap-div"></div>
<script>
gsap.to("#gsap-div", {
duration: 2,
x: 200,
backgroundColor: "green",
repeat: -1,
yoyo: true,
ease: "power1.inOut"
});
</script>使用Web Animations API
现代浏览器支持的Web Animations API可以直接通过JavaScript创建和控制动画。
const div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'purple';
document.body.appendChild(div);
div.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(200px)' }
], {
duration: 1000,
iterations: Infinity,
direction: 'alternate',
easing: 'ease-in-out'
});使用CSS过渡效果
对于简单的状态变化动画，CSS的transition属性是最简单的实现方式。
<div id="transition-div"></div>
<style>
#transition-div {
width: 100px;
height: 100px;
background-color: orange;
transition: transform 0.5s ease, background-color 0.5s ease;
}
#transition-div:hover {
transform: translateX(200px);
background-color: pink;
}
</style>每种方法都有其适用场景：CSS动画适合简单效果，requestAnimationFrame适合需要精细控制的动画，GSAP适合复杂动画序列，Web Animations API是原生解决方案，CSS过渡则适合状态变化。根据项目需求选择最适合的方法。
