Taquigrafía de transición CSS con múltiples propiedades?


Answers

Si tiene varias propiedades específicas que desea hacer la transición de la misma manera (porque también tiene algunas propiedades que específicamente no desea transferir, por ejemplo, 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 declaración de taquigrafía que aparece arriba y hace que (ocasionalmente) el código sea más conciso.

Demo

Question

Parece que no puedo encontrar la sintaxis correcta para la taquigrafía de transición de CSS con múltiples 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;
}

Agrego la clase de demostración con javascript. El elemento se vuelve más alto y visible, simplemente no hace transición. Prueba en los últimos Chrome, FF y Safari.

¿Qué estoy haciendo mal?

EDITAR: Para ser claros, estoy buscando la versión abreviada para escalar mi CSS. Está lo suficientemente hinchado con todos los prefijos del vendedor. También expandió el código de ejemplo.




Yo que trabajo con esto:

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



Links