CSS轉換 - 溢出和盒子陰影問題

Question

我正在做一個簡單的向上/向下滑動轉換。

設置很簡單 - 我有一個父form元素已應用overflow: hidden; max-height: 0; transition: 200ms, all;它和一個子fieldset有border: 1px solid #ddd; margin: 0; padding: 10px; box-shadow: 0 1px 5px #aaa;。爲了實現向下滑動的效果，我將一個類應用於form的父級，後者又將其css更改爲max-height: 100px; overflow: visible;。

這裏是它在行動小提琴：

http://jsfiddle.net/1Lqmrzgw/

我的問題是因爲我不必設置overflow: visible在打開狀態，你可以看到形式「衰落」，而不是僅僅滑動向下（點擊查看1查看）。如果我起飛overflow: visible則box-shadow不可見。

我怎樣才能克服這個問題，並創建我的向上滑動/滑下過渡並保持box-shadow可見？

我的全HTML：

<div class="container"> 
    <ul> 
     <li> 
      <p>view 1</p> 
      <form> 
       <fieldset> 
        <label>a label</label> 
        <input type="text" /> 
        <br/> 
        <label>a label</label> 
        <input type="text" /> 
       </fieldset> 
      </form> 
     </li> 
     <li> 
      <p>view 2</p> 
      <form> 
       <fieldset> 
        <label>a label</label> 
        <input type="text" /> 
        <br/> 
        <label>a label</label> 
        <input type="text" /> 
       </fieldset> 
      </form> 
     </li> 
    </ul> 
</div> 

完整的CSS：

/* setup */ 
.container { margin: 15px; border: 1px solid #ccc; } 
ul { list-style: none; margin: 0; padding: 0; } 
li { border-bottom: 1px solid #ccc; } 
li:last-of-type { border-bottom: none; padding-bottom: 0; } 
fieldset { border: 1px solid #ddd; margin: 0; padding: 10px; } 
p { cursor: pointer; transition: 200ms, all; padding: 15px; margin: 0; } 
p:hover { background: #fff6e3; } 
.open p { background: #fff6e3; } 

/* show/hide */ 

form { overflow: hidden; max-height: 0; transition: 200ms, all; } 
.open form { max-height: 100px; overflow: visible; transition: 200ms, all; box-shadow: 0 1px 5px #aaa; } 

JS：

$('p').click(function(e){ 
    $(this).parent().toggleClass('open'); 
}); 

Answer 1

添加

box-shadow: 0px 1px 5px #aaa; 

到：

.open form { max-height: 100px; transition: 200ms, all; overlay:visible;} 

這樣的：

.open form { max-height: 100px; transition: 200ms, all; overlay:visible; box-shadow: 0px 1px 5px #aaa; } 

Answer 2

我已成功地包含字段集內的表單字段並取得了影戲更好。我使用了一個特定的高度，所以它不會將表單的大小設置爲內容大小，但至少它是一個滑出的表單，因此您有一個起點。

把影子表單元素上，而是和使用的height代替max-height：

form { height: 0; transition: 500ms, all; box-shadow: 0 1px 5px #aaa; } 
.open form { height: 100px; transition: 500ms, all; } 

把overflow: hidden的fieldset，使之成爲形式的整個高度，並添加里面的fieldset另一個元素您可以與邊框和填充樣式：

fieldset { overflow: hidden; border: none; margin: 0; padding: 0; height: 100%; } 
fieldset > div { height: 80px; padding: 10px; border: 1px solid #ddd; } 

演示：http://jsfiddle.net/Guffa/k9nj3s43/5/

（我放慢了轉換，以便更好地看看到底發生了什麼。）