3

Gostaria de saber como posso inverter o efeito de transição de elementos com CSS3

$('span').on('click', function(){

  if($(this).text() == 'Mostrar Efeito')
  {
      $('div').css('max-height', '250px');
      $(this).text('Resetar');
  }
  else
  {
       $('div').css('max-height', '0');
       $(this).text('Mostrar Efeito');
  }

});
div{

  background-color: coral;
  width: 200px;
  height: 250px;
  max-height: 0;
  transition: 0.5s;
}

span{

  cursor: pointer;
 

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Mostrar Efeito</span>
<div></div>

Percebe-se que neste pequeno exemplo que criei o efeito começa de cima e vai para baixo. Gostaria de saber como consigo inverter este efeito de baixo para cima. Tentei achar na internet algo parecido mas sem sucesso (acho que pela falta de conseguir formatar a dúvida corretamente).

5
  • Na verdade ele não está indo de cima para baixo, ele apenas está aumentando e assim procurando espaço para deslocar e "caber", ou seja todos elementos sempre irão aumentar porque começam de cima em HTML. Eu poderia sugerir position: relative+position: absolute que irá funcionar, mas não sei exatamente o que você quer.
    – Syzoth
    Commented 10/10/2017 às 17:59
  • Ok, então ele aumenta de cima vindo pra baixo... Quero que ele aumente de baixo vindo pra cima.. Como diz na pergunta
    – Bsalvo
    Commented 10/10/2017 às 18:02
  • Você entendeu o que eu disse? De cima pra baixo é apenas uma sensação, ele não está vindo de cima na real, ele esta apenas deslocando espaço. Vou postar uma sugestão de qualquer forma.
    – Syzoth
    Commented 10/10/2017 às 18:03
  • Entendi o que você disse, e você também entendeu o que eu disse.. então é só nos adaptarmos aos nossos entendimentos, que chegamos numa resposta como fez o Gabriel, eu posso ter me expressado de uma forma errada mas no fim das contas vc sabia qual era a dúvida..
    – Bsalvo
    Commented 11/10/2017 às 11:38
  • Não é questão de um entendeu o outro, a questão era apenas entender que isso é apenas uma percepção, a parte que disse, não sei o que exatamente você quer, se refere se o position funcionaria ou não pra você porque não sei aonde de sua página você usaria, pois adicionar algo assim poderia quebrar a página toda. Entende? Mas que bom que deu certo.
    – Syzoth
    Commented 11/10/2017 às 11:42

1 Resposta 1

4

Sem saber a sua intenção, fica um pouco complicado de conseguir uma solução exata, mas é como o Guilherme disse nos comentários que por padrão ele cresce e o espaço para crescer é para baixo.

Você pode fazer uma div com o tamanho que deseja e coloca position: relative depois pode criar o box que irá usar em uma div com position: absolute; width: 100%; bottom: 0px; left: 0px; height: 0%; e depois quando fizer o efeito irá fazer um height: 100%

$('span').on('click', function(){

  if($(this).text() == 'Mostrar Efeito')
  {
      $('div#box').animate({'height': '100%'}, 200);
      $(this).text('Resetar');
  }
  else
  {
       $('div#box').animate({'height': '0%'}, 200);
       $(this).text('Mostrar Efeito');
  }

});
div#content{
  width: 200px;
  height: 250px;
  position: relative;
}
div#box{

  background-color: coral;
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

span{

  cursor: pointer;
 

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Mostrar Efeito</span>
<div id="content">
  <div id="box">
  
  </div>
</div>

4
  • Quando for assim, você pode criar um exemplo funcional por aqui mesmo, ou pelo JSFiddle Commented 10/10/2017 às 18:07
  • Nesse caso ai eu usei o animate, que deixa um pouco mais simples no jquery, mas pode usar como estava usando também! Commented 10/10/2017 às 18:15
  • eu ia postar um exemplo, mas o seu está otimo +1
    – Syzoth
    Commented 10/10/2017 às 18:15
  • Só não consigo entender porque vocês precisam saber a intenção da coisa.. (a dúvida era só essa mesmo) Muito obrigado pela resposta, agora com ela posso modifica-la aprimora-la se possível e conseguir aplicar em qualquer situação.
    – Bsalvo
    Commented 11/10/2017 às 11:36

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 .