Sanjeev K Sanjeev K - 1 month ago 14
HTML Question

CSS trasition - Slide down and up

I am trying show/hide div on click, and wanted to use

CSS
transition, that will be like when clicked on open, it will show a div from top to bottom with sliding effect, and and when close it will slide up from bottom and hide, I attempt to create this using
css transition
but not working, can anybody suggest?

Here is the JSFiddle demo



$('.showdiv').click(function(){
$(".morphing_search").show();
});

$('.close-btn').click(function(){
$(".morphing_search").hide();
});

body {
background: #fff;
}
.morphing_search {
width: 100%;
height: 500px;
left: 0;
top: 20px;
background: #cdcdcd;
display: none;
transition-property: all;
transition-duration: .1s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.close-btn {
position: absolute;
right: 30px;
top: 10px;
background: #f00;
color: #fff;
padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<a class="showdiv" href="javascript:;">Open box</a>
<div class="morphing_search"> this is the test div </div>
<a class="close-btn" href="javascript:;">X</a>




Answer

You can't use display property when using animation/transition in css.

So, what I did is I animate the max-height.

In active state, I exaggerated the value.

$('.showdiv').click(function(){
   $(".morphing_search").addClass('active');
});

$('.close-btn').click(function(){
   $(".morphing_search").removeClass('active');
});
.morphing_search {
  width: 100%;
  height: 500px;
  left: 0;
  top: 20px;
  background: #cdcdcd;
  max-height: 0;
  overflow: hidden;
  transition-property: all;
  transition-duration: .7s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.morphing_search.active {
  max-height: 500px; }

.close-btn {
  position: absolute;
  right: 30px;
  top: 10px;
  background: #f00;
  color: #fff;
  padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="showdiv" href="javascript:;">Open box</a>
<div class="morphing_search"> this is the test div </div>
<a class="close-btn" href="javascript:;">X</a>

Using css. You need to add and remove class.

Hope it helps! Cheers!

Comments