js 实现 transition

使用 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);

注意事项

• 确保修改的属性在 CSS 的 transition 属性中有定义。
• 某些属性如 display 无法应用 Transition，需改用 opacity 或 visibility。
• 使用 transitionend 事件时注意浏览器兼容性，可能需要添加前缀。

通过合理组合 CSS Transition 和 JavaScript，可以实现丰富的交互效果，同时保持代码的可维护性。