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).
position: relative
+position: absolute
que irá funcionar, mas não sei exatamente o que você quer.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.