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/

（我放慢了过渡速度，以便更好地了解发生了什么。）

CSS转换 - 溢出和盒子阴影问题

2 个答案: