tag - CSS taquigrafía de transición con múltiples propiedades?

javascript title

Question

Parece que no puedo encontrar la sintaxis correcta para la taquigrafía de transición CSS con varias propiedades. Esto no hace nada:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

Añado la clase show con javascript. El elemento se vuelve más alto y visible, simplemente no hace la transición. Pruebas en los últimos Chrome, FF y Safari.

¿Qué estoy haciendo mal?

EDITAR: Para ser claro, estoy buscando la versión abreviada para reducir mi CSS. Está lo suficientemente hinchado con todos los prefijos de los vendedores. También amplió el código de ejemplo.

Answer 1

Al tener un retardo de .5s en la transición de la propiedad de opacidad, el elemento será completamente transparente (y por lo tanto invisible) todo el tiempo que su altura esté en transición. Así que lo único que verás es el cambio de opacidad. Entonces obtendrás el mismo efecto que dejar la propiedad de altura fuera de la transición:

"transición: opacidad .5s .5s;"

¿Es eso lo que quieres? Si no, y desea ver la transición de altura, no puede tener una opacidad de cero durante todo el tiempo de transición.

Answer 2

Creo que funciona con esto:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;

Answer 3

Las transiciones CSS se controlan mediante la propiedad de transición abreviada. Esta es la mejor manera de configurar las transiciones, ya que hace que sea más fácil evitar que las longitudes de la lista de parámetros no estén sincronizadas, lo que puede ser muy frustrante tener que pasar mucho tiempo depurando el CSS.

Puede controlar los componentes individuales de la transición con las siguientes sub-propiedades:

1. propiedad de transición
2. duración de la transición
3. función de tiempo de transición
4. retraso de transición

La sintaxis CSS abreviada se escribe de la siguiente manera:

div { transition: <property> <duration> <timing-function> <delay>; }

Nota: Transition -delay sin embargo es una propiedad opcional.

Answer 4

Si tiene varias propiedades específicas que desea hacer la transición de la misma manera (ya que también tiene algunas propiedades que específicamente no quiere hacer la transición, digamos opacity ), otra opción es hacer algo como esto (prefijos omitidos por brevedad):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

La segunda declaración anula el all en la taquigrafía anterior y crea un código más conciso (ocasionalmente).

Demo

Answer 5

Sintaxis:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Tenga en cuenta que la duración debe ser anterior al retraso, si se especifica este último.

Transiciones individuales combinadas en declaraciones abreviadas:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

O simplemente hacer la transición a todos:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Aquí hay un ejemplo sencillo . Aquí hay otro con la propiedad de retraso .

Edición: anteriormente se enumeran aquí las compatibilidades y problemas conocidos relacionados con la transition . Eliminado por legibilidad.

En pocas palabras: solo úselo. La naturaleza de esta propiedad es inigualable para todas las aplicaciones y la compatibilidad ahora es muy superior al 94% a nivel mundial.

Si aún desea estar seguro, consulte http://caniuse.com/css-transitions

Answer 6

Yo que trabajo con esto:

element{
   transition : height 3s ease-out, width 5s ease-in;
}