Reverse CSS3 transition effect

Asked

Viewed 206 times

3

I wonder how I can reverse the transition effect of elements with 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>

You can see that in this small example that I created the effect starts from above and goes down. I’d like to know how I can reverse this effect from the bottom up. I tried to find something similar on the internet but without success (I think due to the lack of being able to format the doubt correctly).

css3

  • In fact it is not going from top to bottom, it is just increasing and so looking for space to shift and "fit", IE all elements will always increase because they start from top in HTML. I could suggest position: relative+position: absolute that will work, but I don’t know exactly what you want.

  • Okay, so it goes up from the top coming down... I want it to go up from the bottom coming up.. As it says in the question

  • Do you understand what I said? From the top down it’s just a feeling, it’s not coming from the top in real, it’s just moving space. I’ll post a suggestion anyway.

  • I understood what you said, and you also understood what I said.. then we just adapt to our understandings, that we arrived at an answer as did Gabriel, I may have expressed myself in a wrong way but in the end you knew what the doubt was..

  • It’s not a question of one understood the other, the point was just to understand that this is just a perception, the part that said, I don’t know what exactly you want, refers to whether the position whether or not it would work for you because I don’t know where on your page you would use it, because adding something like that could break the whole page. You know? But I’m glad it worked out.

1 answer

4


Not knowing his intention, it gets a little complicated to get an exact solution, but it’s like Guilherme said in the comments that by default he grows and the room to grow is down.

You can make a div with the size you want and place position: relative then you can create the box that you will use in a div with position: absolute; width: 100%; bottom: 0px; left: 0px; height: 0%; and then when it does the effect will make a 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>

  • When so, you can create a functional example right here, or by JSFiddle

  • In this case then I used Animate, which makes it a little simpler in jquery, but you can use as I was using too!

  • I was going to post an example, but yours is great +1

  • I just can’t understand why you need to know the intent of the thing.. (the doubt was just that) Thank you very much for the reply, now with it I can modify it improve it if possible and manage to apply in any situation.

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.