[分享]css3执行后又变回来了

最近我遇到了一个奇怪的问题——我的CSS3代码在执行后又变回去了

 .box {
        transition: all 1s ease;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box:hover {
        transform: rotate(90deg);
        background-color: blue;
    } 

上面这段代码的作用是当鼠标悬停在box元素上时，元素会旋转90度，并且背景色变为蓝色，过程使用了CSS3的过渡效果。然而，我在执行的时候发现，元素旋转了90度并且背景色变成了蓝色，但是过渡效果并没有生效，元素瞬间就变成了新的状态。

我检查了代码，看了文档，然后试了各种办法，但都没有解决问题。最终，我意识到可能是因为元素的样式被JavaScript修改了导致过渡效果被打断。于是我把JavaScript代码改成了：

 const box = document.querySelector('.box');
    box.addEventListener('mouseover', () => {
        box.style.transform = 'rotate(90deg)';
        box.style.backgroundColor = 'blue';
    }); 

这样，元素的样式就是通过JavaScript动态修改的，CSS3过渡效果也就能正常工作了。

这次经历让我意识到，CSS3的过渡效果虽然方便好用，但是和JavaScript一起使用的时候也需要尤其小心，避免出现这种意想不到的问题。同时，也让我更加深刻地了解到CSS和JavaScript的交互性，在编写代码的时候需要格外注意。