当前位置：首页 > JavaScript

js 实现 transition

2026-02-01 19:15:39JavaScript

使用 CSS Transition 与 JavaScript 结合

在 JavaScript 中实现 CSS Transition 效果，通常通过动态修改元素的样式属性来触发过渡。CSS Transition 依赖于 transition 属性定义过渡效果，而 JavaScript 用于控制触发时机。

/* 基础 CSS 定义过渡效果 */
.element {
  transition: all 0.3s ease-in-out;
}

// 通过 JavaScript 触发过渡
const element = document.querySelector('.element');
element.style.width = '200px'; // 修改属性触发过渡

监听 Transition 事件

JavaScript 可以监听 Transition 的开始和结束事件，以便在动画完成后执行其他操作。

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

动态修改 Transition 属性

通过 JavaScript 动态调整 Transition 的持续时间或属性。

element.style.transition = 'height 0.5s linear';
element.style.height = '300px';

使用 ClassList 切换过渡

通过添加或移除 CSS 类来触发过渡效果，这种方式更易于维护。

.element.active {
  transform: scale(1.2);
}

element.classList.add('active'); // 触发过渡

禁用 Transition 临时

在某些场景下可能需要临时禁用过渡，再立即修改样式。

element.style.transition = 'none';
element.style.opacity = '0';
// 强制重绘
element.offsetHeight; // 触发重绘
element.style.transition = 'opacity 0.3s';
element.style.opacity = '1';

实现复杂动画序列

通过组合多个 Transition 和 setTimeout 实现复杂动画序列。

element.style.transition = 'transform 0.3s';
element.style.transform = 'translateX(100px)';
setTimeout(() => {
  element.style.transition = 'transform 0.3s, opacity 0.3s';
  element.style.transform = 'translateX(100px) translateY(50px)';
  element.style.opacity = '0.5';
}, 300);