css3 title property - CSS taquigrafía de transición con múltiples propiedades?





3 Answers

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

tag input attribute

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.




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.




Creo que funciona con esto:

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



Related