爲什麼更改通過JavaScript的樣式會受到CSS轉換的影響

我只是簡單地改變當我點擊它時更改按鈕的color和background-color。爲什麼更改通過JavaScript的樣式會受到CSS轉換的影響

<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轉換？有沒有這方面的文件？

來源

2013-03-15 Ali Bassam

'CSS3' transitions本來就是我認爲的瀏覽器支持的。 – 2013-03-15 23:47:17

只要屬性的值發生更改，就會應用您的轉換。無論您是通過懸停，焦點還是調整大小（例如使用媒體查詢），單擊或通過JavaScript執行其他任何事件，都無所謂。

一般而言，您在元素的兩個狀態之間有一個轉換。您首先確定其初始狀態：當您更改任這兩個屬性的值（並不要緊，你是否做到這一點使用的:hover僞類或JavaScript）

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

，你的元素會進入另一個狀態，並且您將在來自初始狀態和來自這個新狀態的屬性值之間進行轉換。

來源

2013-03-15 23:55:42 Ana

您用於使用JavaScript更改樣式的方法基本上是直接在元素本身上手動更改style屬性的一種方法。任何時候樣式都會變成其他東西，並且您爲其定義了一個轉換，那麼該轉換將會激活以更改爲新樣式。這包括JavaScript對樣式所做的更改。

來源

2013-03-15 23:55:19 animuson

爲什麼更改通過JavaScript的樣式會受到CSS轉換的影響

回答

相關問題