滑动面板动画

Question

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

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

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

我制作了一个 Plunker 示例项目来代表我的问题 :

在这个 Plunker 中，我想：

从 div（红色）的顶部打开我的滑动面板。你会注意到，当你点击按钮打开它时，滑动面板从页面底部开始他的动画并越过我的div（红色）。
将我的滑动面板与我的 div（红色）对齐。

所以这是我的问题：

如何从 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'
});

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

我如何给他提供与红色 div 完全相同的大小/填充/边距等（因为递归地寻找他的 parent 的填充和边距似乎不是最好的解决方案）。

编辑：如果可能的话，我正在寻找 "generic" 解决方案，我希望我的滑动面板能够在它们发生变化时适应我上面定义的约束（所以我想避免在我的 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 不在屏幕上，那么它会 "slide" 到屏幕上，如果 div 在屏幕上，那么它会 "slide" 滑出屏幕。但请确保您设置的值适合您的需要，因为这些值可能不适用于您的解决方案。

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



    }

有什么问题，尽管问。

滑动面板动画

SlidingPanel Animation

html

javascript

css

animation

sliding