樣式 transitionProperty 屬性
示例
將滑鼠懸停在 div 元素上,逐漸改變其寬度和高度
document.getElementById("myDIV").style.transitionProperty = "width,height";
自己動手試一試 »
描述
transitionProperty 屬性指定過渡效果對應的 CSS 屬性的名稱(當指定的 CSS 屬性發生變化時,過渡效果將開始)。
提示: 當用戶將滑鼠懸停在元素上時,通常會發生過渡效果。
注意: 務必設定 transitionDuration 屬性,否則持續時間為 0,過渡將不起作用。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
transitionProperty | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
語法
返回 transitionProperty 屬性
object.style.transitionProperty
設定 transitionProperty 屬性
object.style.transitionProperty = "none|all|property|initial|inherit"
屬性值
值 | 描述 |
---|---|
none | 無屬性將獲得過渡效果 |
all | 預設值。所有屬性都將獲得過渡效果 |
property | 定義一個逗號分隔的 CSS 屬性名稱列表,過渡效果將應用於這些屬性 |
initial | 將此屬性設定為其預設值。閱讀關於 initial |
inherit | 從其父元素繼承此屬性。閱讀關於 inherit |
技術詳情
預設值 | all |
---|---|
返回值 | 一個字串,表示元素的 transition-property 屬性 |
CSS 版本 | CSS3 |
相關頁面
CSS 參考: transition-property 屬性