从js更改css属性会中断css动画

Changing css property from js breaks css animation

本文关键字：css 中断 动画 属性 更改 js      更新时间：2023-09-26

我有一个悬停效果的按钮（颜色变化）。

button {
    width: 180px;
    height: 80px;
    background-color: #A0522D;  
}
button:hover {
    background-color: #CD853F;
}

然后，从js中，我想更改背景颜色，例如，当选择的按钮是正确的时。这就是我想到的：

buttons[i].style.backgroundColor = "#A0522D";

我也有动画的转换属性：

button {
    transition: background 0.5s ease, color 0.2s ease;
}

似乎每当我第一次更改背景颜色时，它都会完全删除悬停动画。不过，当我更改字体颜色而不是背景颜色时，情况并非如此。

你知道如何让悬停动画和js动画同时改变bgcolor吗？或者可能是我对按钮设置动画的方法不对？

这与CSS规则的特殊性有关。在元素上设置的规则（例如，通过设置style属性）将比在CSS文件/样式块中声明的规则具有更高的特异性（除非使用!important）。

更好的方法是使用类来设置背景属性，并更改元素上的属性，而不是直接设置样式：

buttons[i].className = "myClass";

这个StackOverflow的答案很好地描述了如何在javascript中设置CSS类。您可以在本文中阅读有关CSS特性的更多详细信息。

您可以使用javascript更改类。

$('#yourElem').click(function(){
    $(this).toggleClass('on')
})

然后使用css 管理所有转换

#yourElem { background-color:red; transition: background-color 500ms ease; }
#yourElem.on { background-color:blue; }

这将在单击时转换两者。

然后，只要你没有在新的转换中指定悬停元素，你就可以同时做这两件事。

#yourElem { color:black; background-color:red; transition: background-color 500ms ease,  color 500ms ease; }
#yourElem:hover { color:pink;  }
#yourElem.on {color:white; background-color:blue; }

您可以使用jquery来更改css，这可能会有所帮助？使用悬停和jquery颜色库https://github.com/jquery/jquery-color

$('node').animate({ backgroundColor: "#f6f6f6" }, 'fast');
相关文章：