Taquigrafia transição CSS com várias propriedades?


519

Não consigo encontrar a sintaxe correta para a abreviação de transição CSS com várias propriedades. Isso não faz 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;
}

Eu adiciono a classe show com javascript. O elemento se torna mais alto e visível, apenas não faz a transição. Teste nos mais recentes Chrome, FF e Safari.

O que estou fazendo errado?

EDIT: Só para ficar claro, eu estou procurando a versão abreviada para reduzir meu CSS. É inchado o suficiente com todos os prefixos do fornecedor. Também expandiu o código de exemplo.


2

3
Você realmente altera os valores de altura e opacidade? Caso contrário, eles não mudam
yunzen 12/03/12

Não sou muito versado em transições CSS - os .5svalores duplos são opacitypretendidos?
BoltClock

A documentação não fornece um exemplo para usar a versão abreviada com várias propriedades. A altura muda de 0 a 200px, a opacidade de 0 a 1. O segundo 0,5s é um atraso na transição da opacidade. Eu quero um elemento a crescer em altura, e quando isso estiver concluído, disfarçá-la no.
Gregory Bolkenstijn

2
Ah sim, o valor do atraso.
BoltClock

Respostas:


752

Sintaxe:

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

Observe que a duração deve vir antes do atraso, se o último for especificado.

Transições individuais combinadas em declarações 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;

Ou apenas faça a transição de todos eles:

-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;

Aqui está um exemplo direto . Aqui está outro com a propriedade delay .


Edit: anteriormente listados aqui foram as compatibilidades e problemas conhecidos sobre transition. Removido para facilitar a leitura.

Conclusão: basta usá-lo. A natureza dessa propriedade é ininterrupta para todos os aplicativos e a compatibilidade agora está bem acima de 94% globalmente.

Se você ainda deseja ter certeza, consulte http://caniuse.com/css-transitions


1
Você já tentou isso? Isso não funciona para mim. Também não posso usar a propriedade all porque tenho um atraso na segunda propriedade.
Gregory Bolkenstijn 12/03/12

3
Existe algum desempenho / memória / outras implicações no uso em allvez de listar as propriedades específicas? Por exemplo, se estou planejando fazer a transição backgrounde colorapenas - é melhor especificar ambos ou apenas usá-lo all? Além disso - dado que o IE6-9 não suporta transições e o IE10 as suporta sem prefixo - há alguma vantagem / desvantagem em incluir as ms-transition:diretivas?
mattstuehler

9
Definitivamente, há um impacto no desempenho ao fazer a transição de todas as propriedades, em vez de simplesmente a que você precisa. Isso pode causar sérios danos se você tiver vários elementos fazendo a transição de todas as propriedades ao mesmo tempo. Sobre ms-transition, não sei por que motivo, agora que o IE10 está pronto, por que alguém ainda usaria em ms-transitionvez do padrão transition. Não causará nenhum problema em ter os dois, mas, especialmente em uma folha de estilo com muita transição, inchará seu CSS. Mais importante, o tamanho do arquivo também será afetado.
Rémi Breton

3
Eu tive o mesmo problema e parecia que o uso de "transição: opacidade 1s .5s, altura máxima .5s 0" não estava funcionando enquanto "transição: opacidade 1s .5s, altura máxima .5s 0s" estava. Primeira vez que vejo uma unidade necessária para um valor zero em css!
mlarcher

5
Vale ressaltar que usar 'all' é mais lento que especificar propriedades específicas.
19420 Nathan

433

Se você possui várias propriedades específicas que deseja fazer a transição da mesma maneira (porque também possui algumas propriedades que não deseja fazer a transição, por exemplo opacity), outra opção é fazer algo assim (prefixos omitidos por brevidade):

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

A segunda declaração substitui a allna declaração abreviada acima e torna (ocasionalmente) um código mais 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>

Demo


4
Isso é útil! Não apenas por causa da transition-propertysubstituição, mas também porque, por exemplo, transition-delayprecisa ser especificado após a abreviação (pelo menos no webkit). Em outras palavras, a taquigrafia implica um transition-delayde 0 e colocando um atraso autônomo antes dos conjuntos de taquigrafia-lo de volta para 0.
duncanwilcox

@duncanwilcox você pode fazer transition: [props] [duration] [easing] [delay] em todos os navegadores modernos
Jason

9
Prefira esta resposta MUITO mais do que a resposta aceita.
Erutan409

3
encantador! realmente gosto da abordagem!
Wasddd_ 9/1018

36

Eu que trabalho com isso:

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

Era isso que eu procurava - abreviação de várias propriedades. Obrigado!
12138 Adam Moisa

2

Por ter o atraso de .5s na transição da propriedade opacidade, o elemento ficará completamente transparente (e, portanto, invisível) o tempo todo em que sua altura estiver em transição. Então, a única coisa que você realmente verá é a mudança de opacidade. Portanto, você obterá o mesmo efeito que deixar a propriedade height da transição:

"transição: opacidade .5s .5s;"

É isso que você está querendo? Caso contrário, e você deseja ver a transição da altura, não poderá ter uma opacidade zero durante todo o tempo em que estiver em transição.


Isso também não funciona, pois a altura permanecerá 0 durante a transição da opacidade.
Xesau

0

Isso me ajudou a entender / otimizar, apenas o que eu precisava para 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
  }
}

~ Isso se aplica a todas as propriedades de transição (duração, função de tempo de transição, etc.) na classe '.base'


-4

Eu acho que trabalho com isso:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.