为什么通过JavaScript改变样式会受到CSS转换的影响

Question

我只是改变改变一个按钮的color和background-color，当我点击它。

<input type="button" value="click me" id="myButton" onclick="ChangeColor()"/>

这个按钮的CSS包含color和background-color的CSS过渡，然而，在:hover伪元素上我没有添加任何样式，我没有改变颜色。

#myButton{
     color:#3399FF;
     background-color:#FFFFFF;
     /* These transitions are supposed to change the color in case I hover over the button */
     -webkit-transition: background 0.5s,color 0.5s;
        -moz-transition: background 0.5s,color 0.5s;
            transition: background 0.5s,color 0.5s;
}
#myButton:hover{
     /* But since there's nothing here, the color won't change when I hover */
}

现在，当我通过JavaScript改变样式时，它们会在使用过渡时改变，这意味着，颜色会在0.5s之后改变，而不是立即改变。

function ChangeColor()
{
   document.getElementById("myButton").style.color = "#FFFFFF";
   document.getElementById("myButton").style.backgroundColor = "#3399FF";
}

这是一个非常好的事情，我喜欢它，但我只是想知道，JavaScript如何尊重CSS3过渡?有相关的文件吗?

Answer 1

每当属性的值被改变时，就会应用转换。无论你是在悬停、聚焦、调整大小(例如使用媒体查询)、点击或任何其他事件上通过JavaScript更改它都无关紧要。

通常，元素的两种状态之间有一个转换。首先定义初始状态:

#myButton {
     color: #39f;
     background: #fff;
     transition: .5s;
}

当你改变这两个属性中的任何一个的值时(不管你是使用:hover伪类还是JavaScript)，你的元素将进入另一个状态，你将有一个从初始状态到这个新状态的属性值之间的过渡。

Answer 2

使用JavaScript更改样式的方法本质上是直接在元素本身上手动更改style属性的方法。任何时候样式更改为其他样式，并且为其定义了过渡，该过渡将被激活以更改为新样式。这包括JavaScript对样式的更改。