当前位置：首页 > JavaScript

js实现过渡

2026-04-06 21:52:04JavaScript

使用CSS过渡与JavaScript结合

在JavaScript中实现过渡效果通常结合CSS的transition属性。通过动态修改元素的样式属性触发平滑动画。

定义CSS过渡属性：

.element {
  transition: all 0.3s ease-in-out;
}

通过JavaScript修改样式触发过渡：

const element = document.querySelector('.element');
element.style.width = '200px'; // 触发宽度变化的过渡

使用requestAnimationFrame实现自定义动画

对于需要精细控制的动画，可以使用requestAnimationFrame逐帧处理：

function animate(element, duration, from, to) {
  const startTime = performance.now();

  function update(time) {
    const progress = Math.min((time - startTime) / duration, 1);
    element.style.opacity = from + (to - from) * progress;

    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

animate(document.getElementById('box'), 1000, 0, 1);

使用Web Animations API

现代浏览器支持Web Animations API，提供更强大的动画控制：

const element = document.getElementById('box');
element.animate([
  { transform: 'scale(1)', opacity: 1 },
  { transform: 'scale(1.5)', opacity: 0.5 }
], {
  duration: 1000,
  easing: 'ease-in-out',
  iterations: Infinity
});

使用第三方动画库

对于复杂动画场景，可考虑使用专业动画库：

GSAP示例：

gsap.to(".box", {
  duration: 1,
  x: 100,
  rotation: 360,
  ease: "bounce.out"
});

Anime.js示例：

anime({
  targets: '.element',
  translateX: 250,
  rotate: '1turn',
  duration: 800
});

处理过渡事件

可以监听过渡开始和结束事件：

js实现过渡

element.addEventListener('transitionstart', () => {
  console.log('Transition started');
});

element.addEventListener('transitionend', () => {
  console.log('Transition completed');
});