js实现transition
使用CSS transition与JavaScript结合
在JavaScript中实现CSS过渡效果（transition），通常通过动态修改元素的样式属性来触发。CSS transition本身是CSS属性，但可以通过JavaScript控制其触发条件。
定义CSS transition属性：
.element {
width: 100px;
height: 100px;
background: blue;
transition: all 0.5s ease;
}通过JavaScript修改样式触发过渡：
const element = document.querySelector('.element');
element.addEventListener('click', () => {
element.style.width = '200px';
element.style.height = '200px';
});监听transitionend事件
可以监听过渡完成事件，在过渡结束后执行回调：
element.addEventListener('transitionend', () => {
console.log('Transition ended');
});动态修改transition属性
通过JavaScript动态设置transition属性：
element.style.transition = 'width 1s ease-in-out';
element.style.width = '300px';使用classList切换类名
更推荐的做法是通过切换class来管理过渡状态：
.element.active {
width: 200px;
height: 200px;
background: red;
}JavaScript代码：
element.addEventListener('click', () => {
element.classList.toggle('active');
});强制触发回流
在某些情况下需要强制浏览器回流以确保过渡生效：
element.style.width = '100px';
// 强制回流
void element.offsetWidth;
element.style.width = '200px';控制多个属性过渡
可以单独控制不同属性的过渡效果：
.element {
transition:
width 0.3s ease,
height 0.5s linear,
background-color 1s;
}取消过渡效果
临时移除transition属性可以立即停止过渡：
element.style.transition = 'none';
element.style.width = '100px';
// 恢复过渡
setTimeout(() => {
element.style.transition = '';
}, 100);
