js实现过渡
使用 CSS transition 属性实现过渡效果
在 JavaScript 中可以通过修改元素的 CSS 属性来实现过渡效果，结合 CSS 的 transition 属性
通过修改元素的 class 或直接设置 style 来触发过渡：
const element = document.getElementById('myElement');
element.style.transition = 'all 0.3s ease';
element.style.width = '200px';使用 Web Animations API
现代浏览器支持 Web Animations API，可以直接用 JavaScript 创建和控制动画：
const element = document.getElementById('myElement');
element.animate([
{ opacity: 0 },
{ opacity: 1 }
], {
duration: 1000,
easing: 'ease-in-out'
});使用 requestAnimationFrame 实现自定义过渡
对于需要更精细控制的过渡效果，可以使用 requestAnimationFrame：
function animate({ duration, timing, draw }) {
let start = performance.now();
requestAnimationFrame(function animate(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
const progress = timing(timeFraction);
draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
});
}
animate({
duration: 1000,
timing: function(timeFraction) {
return timeFraction;
},
draw: function(progress) {
element.style.width = progress * 100 + 'px';
}
});使用 CSS 类切换实现过渡
通过添加/移除 CSS 类来触发过渡效果：
.box {
transition: all 0.3s ease;
}
.box.active {
transform: scale(1.2);
background-color: #ff0000;
}const box = document.querySelector('.box');
box.addEventListener('click', () => {
box.classList.toggle('active');
});使用 GSAP 动画库
GSAP 是一个专业的 JavaScript 动画库，可以实现复杂的过渡效果：
gsap.to(".box", {
duration: 1,
x: 100,
rotation: 360,
ease: "bounce.out"
});
