用js实现transition
使用 JavaScript 实现 CSS Transition
在 JavaScript 中实现 CSS Transition 可以通过直接操作元素的样式或切换类名来完成。以下是几种常见方法：
直接修改元素的 style 属性
通过 JavaScript 动态修改元素的 transition 属性和目标样式，触发过渡效果。
const element = document.getElementById('target');
element.style.transition = 'all 0.5s ease'; // 设置过渡属性
element.style.width = '200px'; // 触发过渡通过切换类名实现
定义 CSS 类包含过渡效果，通过 JavaScript 切换类名触发动画。
CSS 部分：
.box {
width: 100px;
height: 100px;
background: blue;
transition: all 0.5s ease;
}
.box.active {
width: 200px;
background: red;
}JavaScript 部分：
const box = document.querySelector('.box');
box.addEventListener('click', () => {
box.classList.toggle('active'); // 切换类名触发过渡
});监听过渡事件
JavaScript 可以监听 transitionend 事件，在过渡完成后执行回调。
element.addEventListener('transitionend', () => {
console.log('过渡完成');
});动态设置过渡属性
通过 JavaScript 动态调整过渡的持续时间、延迟或缓动函数。
element.style.transition = 'width 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s';注意事项
- 确保目标样式与初始样式不同，否则过渡不会触发。
- 过渡属性需明确指定（如
width、opacity），使用all可能影响性能。 - 修改
display: none或visibility不会触发过渡，需通过延时或requestAnimationFrame处理。
