CSS trasition - 向下滑動

Question

我正在嘗試在點擊時顯示/隱藏div，並且想要使用CSS轉換，就像在點擊打開時一樣，它將顯示一個由上而下滑動效果的div，並且當關閉它會從底部滑到並隱藏，我試圖創建這個使用css transition但不工作，任何人都可以建議？

這裏是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 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。你需要添加和刪除類。

希望它有幫助！乾杯!