Invert CSS3 transition effect

Question

Invert CSS3 transition effect

Navigation

#1 by (4 votes)

3

I would like to know how to invert the element transition effect 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>

Notice that in this small example I created the effect starts from the top and goes down. I wonder how I can reverse this effect from the bottom up. I tried to find something similar on the Internet but without success (I think for lack of being able to format the doubt correctly).

css3

asked by anonymous 10.10.2017 / 19:55

1 answer

When and why to use a parameterized constructor? Is it better to change native Bootstrap classes or create subclasses and override?

score 4 · Accepted Answer

Without knowing its intention, it is a little complicated to get an exact solution, but it is as Guilherme said in the comments that by default it grows and the space to grow is down.

You can make a div with the size you want and put position: relative then you can create the box you will use in a div with position: absolute; width: 100%; bottom: 0px; left: 0px; height: 0%; and then when you do the effect it 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>MostrarEfeito</span><divid="content">
  <div id="box">
  
  </div>
</div>