Latest web development tutorials

×

×

×

×

JavaScript & HTML DOM manual de referência

JavaScript objetos

JavaScript Array objetos JavaScript Boolean objetos JavaScript Date objetos JavaScript Math objetos JavaScript Number objetos JavaScript String objetos JavaScript RegExp objetos JavaScript Propriedades globais / Funções JavaScript operadores

Browser objetos

Window objetos Navigator objetos Screen objetos History objetos Location objetos

DOM objetos

HTML DOM Document objetos HTML DOM elemento de objeto HTML DOM atributo de objeto HTML DOM objetos de evento

HTML objetos

<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>

propriedades de transição HTML DOM Estilo

Anterior: propriedade HTML DOM Estilo transformStyle

Seguinte: propriedade HTML DOM Estilo transitionProperty

Exemplos

O ponteiro do mouse passa sobre o elemento div, ele irá gradualmente mudar a sua aparência:

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

Definição e Uso

propriedade transição é um atalho para definir as quatro propriedades de transição:

transitionProperty, transitionDuration, transitionTimingFunction e transitionDelay.

Nota: Sempre defina a propriedade transitionDuration, caso contrário, a duração é zero, não irá produzir efeitos de transição.

Suporte a navegadores

Internet Explorer 10, Firefox, Opera e Chrome suportam a propriedade de transição.

O Safari suporta outra alternativa da propriedade atribuir essa propriedade WebkitTransition.

Nota: Internet Explorer 9 e versões anteriores não suportam a propriedade de transição.

gramática

atributos retornos de transição:

object .style.transition

Defina as propriedades de transição:

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

Valor de propriedade

值	描述
transitionProperty	规定应用过渡效果的 CSS 属性的名称。
transitionDuration	规定完成过渡效果需要多少秒或毫秒。
transitionTimingFunction	规定过渡效果的速度曲线。
transitionDelay	定义过渡效果何时开始。
initial	设置该属性为它的默认值。请参阅 initial 。
inherit	从父元素继承该属性。请参阅 inherit 。

detalhes técnicos

padrão:	todos 0 facilidade 0
retorna:	String que representa os atributos do elemento de transição.
versão CSS	CSS3

artigos relacionados

CSS Referência: Propriedades de Transição

Anterior: propriedade HTML DOM Estilo transformStyle

Seguinte: propriedade HTML DOM Estilo transitionProperty