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对样式所做的更改。

为什么通过JavaScript更改样式会受到CSS过渡的影响

2 个答案: