Переходы 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; } 

ЯШ:

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

мне удалось содержать поля формы внутри FIELDSET и сделал тень играть лучше. Я использовал определенную высоту, поэтому она не меняет форму на контент, но, по крайней мере, это форма, которая открывается, поэтому у вас есть начальная точка.

Поместите тень на элемент формы вместо этого, и использовать 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/

(Я замедлил переходы, чтобы лучше видеть, что происходит.)