Question

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

$('.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中使用动画/过渡时，您无法使用显示属性。

所以，我做的是为最大高度设置动画。

在活跃的状态下，我夸大了价值。

＆＃13;

$('.showdiv').click(function(){
   $(".morphing_search").addClass('active');
});

$('.close-btn').click(function(){
   $(".morphing_search").removeClass('active');
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

希望它有所帮助！干杯！

CSS trasition - 向下滑动

1 个答案: