HTML-DOM Stil transitionProperty Eigenschaft

Zurück: HTML - DOM - Art Übergangseigenschaften

Next: HTML DOM Stil transitionDuration Eigenschaft

Beispiele

Der Mauszeiger schwebt über das div-Element, es wird nach und nach die Breite und Höhe zu ändern:

document.getElementById("myDIV").style.transitionProperty="width,height";

Definition und Verwendung

transitionProperty Attribut gibt den Namen der CSS-Eigenschaft den Übergangseffekt anzuwenden. (Wenn die angegebene CSS-Eigenschaft ändert, wird der Übergangseffekt beginnen).

Tipp: Übergangseffekt tritt in der Regel , wenn ein Benutzer den Mauszeiger über ein Element bewegt wird .

Hinweis: Setzen Sie immer transitionDuration Eigenschaft, da sonst die Dauer Null ist , wird es nicht Übergangseffekte erzeugen.

Browser-Unterstützung

Internet Explorer 10, Firefox, Opera und Chrome Unterstützung transitionProperty Eigenschaft.

Safari unterstützt eine weitere Alternative der Eigenschaft, die WebkitTransitionProperty Eigenschaft zuzuschreiben.

Hinweis: Internet Explorer 9 und früheren Versionen nicht transitionProperty Eigenschaft unterstützen.

Grammatik

Zurück transitionProperty Eigenschaften:

object .style.transitionProperty

Einstellen transitionProperty Eigenschaften:

object .style.transitionProperty="none|all|property|initial|inherit"

Eigenschaft Wert

值	描述
none	没有属性会获得过渡效果。
all	默认值。所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
initial	设置该属性为它的默认值。请参阅 initial 。
inherit	从父元素继承该属性。请参阅 inherit 。