閱讀(5.2k) 書(shū)簽贊(0) 我要糾錯(cuò)

HTML DOM Style transition 屬性

2018-08-04 20:41 更新

Style transition 屬性

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

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

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

transitionProperty、 transitionDuration、 transitionTimingFunction 和 transitionDelay.

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

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

Safari 支持另一個(gè)可替代該屬性的屬性，即 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)用過(guò)渡效果的 CSS 屬性的名稱。
transitionDuration	規(guī)定完成過(guò)渡效果需要多少秒或毫秒。
transitionTimingFunction	規(guī)定過(guò)渡效果的速度曲線。
transitionDelay	定義過(guò)渡效果何時(shí)開(kāi)始。
initial	設(shè)置該屬性為它的默認(rèn)值。請(qǐng)參閱 initial。
inherit	從父元素繼承該屬性。請(qǐng)參閱 inherit。