閱讀(5.2k) 書簽贊(0) 我要糾錯

HTML DOM Style transition 屬性

2018-08-04 20:41 更新

Style transition 屬性

把鼠標(biāo)指針懸停在 div 元素上，它的外觀會逐漸改變：

document.getElementById("myDIV").style.transition="all 2s";

transition 屬性是一個速記屬性，用于設(shè)置四個過渡屬性：

transitionProperty、 transitionDuration、 transitionTimingFunction 和 transitionDelay.

注意：請始終設(shè)置 transitionDuration 屬性，否則持續(xù)時間為 0，就不會產(chǎn)生過渡效果。

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。

Safari 支持另一個可替代該屬性的屬性，即 WebkitTransition 屬性。

注意：Internet Explorer 9 及其之前的版本不支持 transition 屬性。

返回 transition 屬性：

object.style.transition

設(shè)置 transition 屬性：

object.style.transition="property duration timing-function delay|initial|inherit"

值	描述
transitionProperty	規(guī)定應(yīng)用過渡效果的 CSS 屬性的名稱。
transitionDuration	規(guī)定完成過渡效果需要多少秒或毫秒。
transitionTimingFunction	規(guī)定過渡效果的速度曲線。
transitionDelay	定義過渡效果何時開始。
initial	設(shè)置該屬性為它的默認(rèn)值。請參閱 initial。
inherit	從父元素繼承該屬性。請參閱 inherit。