CSS转换-向下和向上滑动

Question

我尝试在单击时显示/隐藏div，并希望使用CSS转换，就像单击打开时，它将显示一个具有滑动效果的从上到下的div，当关闭它将从底部向上滑动并隐藏时，我尝试使用css transition创建它，但不起作用，有人建议吗？

这是JSFiddle演示

​

$('.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 1

在css中使用动画/转换时，不能使用display属性。

所以，我所做的就是把最大高度动画化。

在积极状态下，我夸大了价值。

​

$('.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>

​

使用css。您需要添加和删除类。

希望能帮上忙！干杯!