js 实现 transition
使用 CSS 和 JavaScript 实现过渡效果
在 JavaScript 中实现 CSS transition 效果，可以通过直接操作元素的样式或类名来触发过渡。以下是几种常见方法：
通过修改内联样式触发过渡
通过 JavaScript 直接修改元素的 style 属性，配合 CSS 定义的过渡属性实现动画效果。
/* CSS 部分 */
.box {
width: 100px;
height: 100px;
background: blue;
transition: all 0.5s ease;
}// JavaScript 部分
const box = document.querySelector('.box');
box.style.width = '200px'; // 触发宽度过渡动画
box.style.backgroundColor = 'red'; // 触发颜色过渡动画通过切换类名触发过渡
定义包含目标样式的 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.classList.add('active'); // 添加类触发过渡使用 transitionend 事件监听过渡完成
通过监听 transitionend 事件，可以在过渡动画完成后执行回调函数。
box.addEventListener('transitionend', (e) => {
console.log('过渡完成', e.propertyName); // 输出被过渡的属性名
});动态设置过渡属性
通过 JavaScript 动态修改过渡的持续时间、缓动函数等属性。
box.style.transition = 'width 1s cubic-bezier(0.4, 0, 0.2, 1)';
box.style.width = '300px'; // 触发自定义过渡效果注意事项
- 性能优化：避免过渡属性设置为
all，明确指定需要过渡的属性（如width、opacity）。 - 硬件加速：对
transform和opacity使用过渡可获得更好的性能。 - 兼容性：
transitionend事件在不同浏览器中可能需要前缀（如webkitTransitionEnd）。
通过结合 CSS 的 transition 属性和 JavaScript 的动态操作，可以实现灵活的交互式过渡效果。
