当前位置：首页 > JavaScript

js 实现 transition

2026-03-14 18:26:24JavaScript

使用 CSS Transition 实现动画效果

在 JavaScript 中实现 CSS Transition 主要涉及动态添加或修改元素的样式属性。CSS Transition 允许在属性变化时平滑过渡。

// 获取元素
const element = document.getElementById('myElement');

// 设置过渡属性
element.style.transition = 'all 0.3s ease-in-out';

// 改变样式触发过渡
element.style.width = '200px';
element.style.backgroundColor = 'blue';

监听 Transition 事件

可以通过 JavaScript 监听 transitionend 事件，在过渡完成后执行回调函数。

element.addEventListener('transitionend', function(event) {
    console.log('Transition ended:', event.propertyName);
    // 执行过渡结束后的操作
});

动态控制 Transition

通过 JavaScript 可以动态控制过渡效果的开启和关闭。

// 禁用过渡
element.style.transition = 'none';

// 立即应用样式变化
element.style.opacity = '0';

// 重新启用过渡
setTimeout(() => {
    element.style.transition = 'opacity 0.5s ease';
    element.style.opacity = '1';
}, 100);

多属性过渡控制

可以为不同属性设置不同的过渡时间和效果。

js 实现 transition

element.style.transition = 'width 0.3s ease, height 0.5s linear, opacity 1s';

使用 classList 管理过渡

通过添加和移除 CSS 类来管理过渡效果更加清晰。

CSS:

js 实现 transition

.box {
    width: 100px;
    height: 100px;
    background: red;
    transition: all 0.3s;
}

.box.active {
    width: 200px;
    height: 200px;
    background: blue;
}

JavaScript:

const box = document.querySelector('.box');
box.classList.add('active'); // 触发过渡

链式过渡效果

通过 JavaScript 可以实现连续的过渡效果。

function animateElement(element) {
    element.style.transition = 'transform 0.5s ease';
    element.style.transform = 'translateX(100px)';

    setTimeout(() => {
        element.style.transition = 'transform 0.5s ease, background 0.3s';
        element.style.transform = 'translateX(100px) translateY(50px)';
        element.style.background = 'green';
    }, 500);
}

响应式过渡

根据窗口大小或其他条件动态调整过渡效果。

window.addEventListener('resize', function() {
    if (window.innerWidth < 768) {
        element.style.transition = 'all 0.2s ease';
    } else {
        element.style.transition = 'all 0.5s ease';
    }
});