CSS Transition

by Rodrigo

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<div id="maindiv">
  <h1>
  CSS Transition Test
  </h1>
  <button type="button" id="mybutton">
    Toggle Height
  </button>
</div>

CSS

#maindiv {
  height:120px;
  padding:10px;
  border:1px solid lightgray;
  background-color:white;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.height500 {
  height:500px !important;
}

JavaScript

$('#mybutton').click(function() {
  	$('#maindiv').toggleClass('height500');
  });