滑动面板动画

Question

我想在我的项目中显示一个滑动面板，从底部固定的 div 开始（所以在顶部方向滑动）。

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

我有一些问题使它工作得很好（从哪里开始滑动，尊重他父母的填充，等等）

我制作了一个代表我的问题的示例项目的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 的位置为固定，然后将底部属性设置为您需要的任何值。

#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;
        }



    }

有任何问题，尽管问。