javascript - 滑动面板动画

Question

我想在我的元素中显示一个滑动面板，从底部固定的 div(所以在顶部方向滑动)。

此滑动面板将用于扩展现有元素的 View 。

我有一些问题要让它很好地工作(从哪里开始滑动，尊重他 parent 的填充等等)

我做了一个Plunker代表我的问题的示例元素:

在这个 Plunker 中，我想:

1. 从我的 div(红色)顶部打开我的滑动面板。您会注意到，当您单击按钮将其打开时，滑动面板会从页面底部开始他的动画并越过我的 div(红色)。
2. 将我的滑动面板与我的 div(红色)对齐。

所以这是我的问题:

1. 如何从我的 div(红色)顶部开始我的滑动动画。

我已经试过了:

.sliding-panel-wrapper {
    /* Other Css property */
    margin-bottom: /*Height of the red div*/;
    bottom: 0;
}

$("#mybtn").click(function() {
    // Increase height instead of moving it from outside of the page to inside
    $("#slidingPanel")[0].style.height= '500px'
});

此解决方案适用于我的面板的起始位置，但我不希望滑动面板增加他的尺寸，而是滑动。

1. 我如何给他提供与红色 div 完全相同的大小/填充/边距等(因为递归地寻找他父项的填充和边距似乎不是最佳解决方案)。

编辑:如果可能的话，我正在寻找一个“通用”的解决方案，我希望我的滑动面板能够适应我上面定义的约束，如果它们发生变化(所以我想避免硬编码我的 css 中的值)。

编辑 2:总结我的问题是:我怎样才能使面板幻灯片不是从页面底部，而是从另一个 div 的顶部(请看我的 plunker)

Answer 1

如果我理解您的问题，您想要一个不在页面上的滑动面板，然后当单击按钮时它会在页面上滑动。

如果是这种情况，那么这将回答您的问题。

这是将 div id 设置为幻灯片的 html 代码。该按钮有一个名为 Slide() 的 onclick 函数。

<div id="slide"></div>
<button onclick="Slide()">Slide</button>

确保 div 的位置固定，然后将 bottom 属性设置为您需要的任何值。

#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}

当您单击“幻灯片”按钮时调用此 javascript。如果 div 不在屏幕上，那么它将“滑”到屏幕上，如果 div 在屏幕上，那么它将“滑”出屏幕。但请确保您设置的值适合您的需要，因为这些值可能不适用于您的解决方案。

var a = false;
    function Slide() {
        if (a) {
            $('#slide').css('bottom', '-52%');
            a = false;
        }
        else {
            $('#slide').css('bottom', '0%');
            a = true;
        }



    }

有任何问题，尽管问。