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

I am simply changing changing the color and background-color of a button when I click on it.

我只是在点击它时改变按钮的颜色和背景颜色。

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

The CSS of this button contains CSS transition for the color and background-color, however, on the :hover pseudo-element I didn't add any styles, I didn't change the color.

这个按钮的CSS包含颜色和背景颜色的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 */
}

Now, when I change the styles via JavaScript, they change while using the transitions, means, the colors will change after 0.5s, and not instantly.

现在,当我通过JavaScript更改样式时,它们会在使用过渡时发生变化,意味着颜色会在0.5秒后发生变化,而不是立即变化。

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

This is a really good thing, and I like it, but I'm just wondering, how does JavaScript respect CSS3 transitions? Is there any documentation for this?

这是一件非常好的事情,我喜欢它,但我只是想知道,JavaScript如何尊重CSS3过渡?有没有这方面的文件?

2 个解决方案

#1

Your transitions are applied whenever the value of the property is changed. It doesn't matter whether you change it on hover, focus, resize (with a media query for example), click or any other event via JavaScript.

只要更改属性的值,就会应用转换。无论您是在悬停,焦点,调整大小(例如,使用媒体查询),点击或通过JavaScript的任何其他事件进行更改都无关紧要。

In general, you have a transition between two states of the element. You first define the initial state:

通常,您在元素的两个状态之间进行转换。首先定义初始状态:

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

When you change the value of either of those two properties (and it doesn't matter whether you do this using the :hover pseudo-class or JavaScript), your element will go into another state and you are going to have a transition between the values of the properties from the initial state and those from this new state.

当您更改这两个属性中的任何一个的值时(无论您是使用:hover伪类还是JavaScript执行此操作都无关紧要),您的元素将进入另一个状态,并且您将在初始状态和来自新状态的属性值。

2 个解决方案

#1

更多相关文章

随机推荐