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

519

Parece que no puedo encontrar la sintaxis correcta para la taquigrafía de transición 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 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: Solo para que quede claro, estoy buscando la versión abreviada para reducir mi CSS. Está lo suficientemente hinchado con todos los prefijos de proveedor. También amplió el código de ejemplo.

Gregory Bolkenstijn
fuente
2
Revisa esta documentación. developer.mozilla.org/en/CSS/CSS_transitions
websymphony
3
¿Cambias realmente los valores de altura y opacidad? De lo contrario, no cambian
yunzen
No estoy muy versado con las transiciones CSS: ¿son los .5svalores dobles después de lo opacityprevisto?
BoltClock
La documentación no da un ejemplo para usar la versión abreviada con múltiples propiedades. La altura cambia de 0 a 200 px, la opacidad de 0 a 1. El segundo .5s es un retraso en la transición de opacidad. Quiero que un elemento crezca en altura, y cuando termine, descolórelo.
Gregory Bolkenstijn
2
Ah sí, el valor del retraso.
BoltClock

Respuestas:

752

Sintaxis:

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

Tenga en cuenta que la duración debe venir antes de la demora, si se especifica esta última.

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 haga 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 .


Editar: anteriormente enumerados aquí estaban las compatibilidades y los problemas conocidos relacionados transition. Eliminado para facilitar la lectura.

En pocas palabras: solo úsalo. La naturaleza de esta propiedad es inigualable para todas las aplicaciones y la compatibilidad ahora está muy por encima del 94% a nivel mundial.

Si todavía quiere estar seguro, consulte http://caniuse.com/css-transitions

Rémi Breton
fuente
1
¿Has probado esto? A mi no me funciona. Tampoco puedo usar toda la propiedad ya que tengo un retraso en la segunda propiedad.
Gregory Bolkenstijn
3
¿Hay alguna implicación de rendimiento / memoria / otras para usar en alllugar de enumerar las propiedades específicas? Por ejemplo, si planeo hacer la transición backgroundy colorsolo, ¿es mejor especificar ambos o simplemente usarlos all? Además, dado que IE6-9 no admite transiciones e IE10 las admite sin prefijar, ¿hay alguna ventaja / desventaja en incluir las ms-transition:directivas?
mattstuehler
99
Definitivamente, hay un impacto en el rendimiento al realizar la transición de todas las propiedades en lugar de simplemente la que necesita. Puede causar daños graves si tiene muchos elementos que cambian todas las propiedades al mismo tiempo. Acerca de ms-transition, no sé de ninguna razón, ahora que IE10 está fuera, por qué alguien aún usaría en ms-transitionlugar del estándar transition. No causará ningún problema tener ambos, pero, especialmente en una hoja de estilo de transición pesada, hinchará su CSS. Más importante aún, el tamaño del archivo también se verá afectado.
Rémi Breton
3
Tuve el mismo problema y parecía que el uso de "transición: opacidad 1s .5s, altura máxima .5s 0" no funcionaba mientras que "transición: opacidad 1s .5s, altura máxima .5s 0s" sí. ¡La primera vez que veo una unidad requerida para un valor cero en CSS!
mlarcher
55
Vale la pena señalar que usar 'all' es más lento que especificar propiedades específicas.
Nathan
433

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 hacer la transición, por ejemplo opacity), otra opción es hacer algo como esto (se omiten los prefijos por brevedad):

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

La segunda declaración anula la alldeclaración de taquigrafía que se encuentra arriba y genera (ocasionalmente) un código más conciso.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}
<p>Hover box for demo</p>
<div class="box"></div>

Manifestación

Jason
fuente
44
¡Esto es útil! No solo por la transition-propertyanulación, sino también porque, por ejemplo transition-delay, debe especificarse después de la taquigrafía (al menos en el kit web). En otras palabras, la forma abreviada implica un transition-delay0 y poner un retardo independiente antes de que los taquigrafía lo pone a 0.
duncanwilcox
@duncanwilcox que puedes hacer transition: [props] [duration] [easing] [delay] en todos los navegadores modernos
Jason
99
Prefiere esta respuesta MUCHO más que la respuesta aceptada.
Erutan409
3
¡encantador! me gusta mucho el enfoque!
wasddd_
36

Yo que trabajo con esto:

element{
   transition : height 3s ease-out, width 5s ease-in;
}
AhbapAldirmaz
fuente
Esto es lo que estaba buscando: abreviatura de varias propiedades. ¡Gracias!
Adam Moisa
2

Al tener el retraso 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. Entonces, lo único que realmente verá es el cambio de opacidad. Entonces obtendrá 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 es así, y desea ver la transición de altura, no puede tener una opacidad de cero durante todo el tiempo que está en transición.

JB
fuente
Esto tampoco funciona, ya que la altura se mantendrá 0 durante la transición de la opacidad.
Xesau
0

Esto me ayudó a comprender / simplificar, solo lo que necesitaba animar:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ Esto se aplica a todas las propiedades de transición (duración, función de sincronización de transición, etc.) dentro de la clase '.base'

gav_aus_web
fuente
-4

Creo que funciona con esto:

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