2

Olá pessoal gostaria de saber se posso ter mais de um transition na mesma tag? Porque implemento os transitions para as propriedades mas não funciona? *Ou isso ocorre porque não defini os valores da propriedade antes.

.trans {
    background: #F00;
    height: 250px;
    opacity: 1;
    -webkit-transition: opacity .25s 1s ease-in-out;
    -moz-transition: opacity .25s 1s ease-in-out;
    -ms-transition: opacity .25s 1s ease-in-out;
    -o-transition: opacity .25s 1s ease-in-out;
    transition: opacity .25s 1s ease-in-out;

    -webkit-transition: height 1.25s ease-in-out;
    -moz-transition: height 1.25s ease-in-out;
    -ms-transition: height 1.25s ease-in-out;
    -o-transition: height 1.25s ease-in-out;
}

.trans:hover {
    height: 10px;
    opacity: .5;
}

Exemplo com o codigo. http://jsfiddle.net/hphf0c74/

Agradeço desde já.

1
  • Recomendo usar o all. transition: all 1.25s ease-in-out
    – dsantoro
    Commented 12/08/2014 às 20:42

2 Respostas 2

1

Da maneira como você fez, a transição de height simplesmente sobrescreve a de opacity. Você precisa listar todas as propriedades que vão sofrer transição de uma vez só, separadas por vírgulas, assim:

.trans {
    background: #F00;
    height: 250px;
    opacity: 1;
    -webkit-transition: opacity .25s 1s ease-in-out, height 1.25s ease-in-out;
    -moz-transition: opacity .25s 1s ease-in-out, height 1.25s ease-in-out;
    -ms-transition: opacity .25s 1s ease-in-out, height 1.25s ease-in-out;
    -o-transition: opacity .25s 1s ease-in-out, height 1.25s ease-in-out;
    transition: opacity .25s 1s ease-in-out, height 1.25s ease-in-out;
}
2
  • Valew! Muito obrigado era exatamente isso. Precisando de algo estamos ai XD Commented 12/08/2014 às 20:51
  • Obrigado, fico feliz em ajudar!
    – bfavaretto
    Commented 12/08/2014 às 20:52
1

Opa! Você não pode usar duas vezes a transition. O segredo é usar todas as propriedades em apenas um transition. Você também precisa definir uma altura e opacidade inicial em .trans e uma final em .trans:hover.

Segue minha solução: http://jsfiddle.net/hphf0c74/1/

CSS

.trans {
  background: #F00;
  -webkit-transition: height .25s ease-in-out, opacity 0.3s ease;
  -moz-transition: height .25s ease-in-out, opacity 0.3s ease;
  -ms-transition: height .25s ease-in-out, opacity 0.3s ease;
  -o-transition: height .25s ease-in-out, opacity 0.3s ease;
  transition: height .25s ease-in-out, opacity 0.3s ease;
  height:0px;
  width:100%;
  opacity:1;
}

.trans:hover {
  height: 30px;
  opacity: .5;
}
2
  • Valew! era exatamente isso cabaçada minha. Precisando de algo estamos ai XD Commented 12/08/2014 às 20:50
  • @DouglasdosSantos valeu!
    – codajoao
    Commented 13/08/2014 às 1:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .