js实现div动画
使用CSS动画和JavaScript触发
在HTML中定义一个div元素，为其添加CSS动画效果。通过JavaScript控制动画的播放或暂停。
<div id="animatedDiv" class="box"></div>.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 2s infinite alternate;
}
@keyframes move {
from { left: 0; }
to { left: 200px; }
}const div = document.getElementById('animatedDiv');
div.addEventListener('click', () => {
div.style.animationPlayState = div.style.animationPlayState === 'paused' ? 'running' : 'paused';
});使用JavaScript直接修改样式
通过定时器不断修改div的样式属性来实现动画效果。
const div = document.getElementById('animatedDiv');
let position = 0;
const animate = () => {
position += 5;
div.style.left = position + 'px';
if (position < 200) {
requestAnimationFrame(animate);
}
};
animate();使用GSAP动画库
GSAP是一个强大的JavaScript动画库，可以创建复杂的动画效果。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>gsap.to("#animatedDiv", {
duration: 2,
x: 200,
rotation: 360,
ease: "bounce.out",
repeat: -1,
yoyo: true
});使用Web Animations API
现代浏览器支持的Web Animations API可以直接用JavaScript创建和控制动画。
const div = document.getElementById('animatedDiv');
div.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(200px)' }
], {
duration: 1000,
iterations: Infinity,
direction: 'alternate',
easing: 'ease-in-out'
});使用CSS过渡效果
通过JavaScript添加或移除类来触发CSS过渡动画。
.box {
transition: all 0.5s ease;
}
.box.move {
transform: translateX(200px);
}const div = document.getElementById('animatedDiv');
div.addEventListener('click', () => {
div.classList.toggle('move');
});
