Почему изменение стиля с помощью JavaScript влияет на переход CSS

Question

Я просто меняю изменения кнопки color и background-color кнопки, когда я нажимаю на нее.

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

CSS этой кнопки содержит переход CSS для color и background-color, однако, на :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 делает для стилей.