从无处向下滑动元素

Question

我正在尝试构建一个组件，其中任意宽度和高度的元素从＆＃34;隐形切口向下滑动＆＃34;在页面上。我不想依赖于隐藏在另一个元素后面，因为向下滑动的元素可能更高，因此在向下滑动之前会出现在它上面。有点像下面没有可见的切口。我试图找出如何设置隐形父元素的样式，以便有内容的孩子可以从内部＆＃34;内部＆＃34;滑出。剪辑路径在这里工作吗？还有什么吗？

___________________________________________
|   -----------------------------------   |
----|                                 |----
    |                                 |
    |                                 |
    |                                 |
    |                                 |
    |                                 |
    |                                 |
    -----------------------------------
                     |
                     V

Answer 1

1. 您应该有一个容器来设置滑动的视图，比如#slider_wrapper
2. 设置溢出隐藏
3. 在元素中为幻灯片设置动画。

Answer 2

jQuery有一个内置的幻灯片功能：

https://www.w3schools.com/jquery/jquery_slide.asp

Answer 3

从概念上讲，它的外观如下：

https://jsfiddle.net/kdLy9pck/1/

<div class='header'>
  some header content here
</div>
<div class='container'>
  <div class='slider'>
    <p>
      content goes here <br />
      content goes here <br />
      content goes here <br />
      content goes here <br />
      content goes here <br />
      <br />
      <span>^^ Close ^^</span>
    </p>
  </div>
</div>

JQuery的：

$(function(){
    $('.slider').slideDown();
  $('.slider span').click(function() {
    $('.slider').slideUp();
  });
})

CSS：

* { margin: 0; padding:0; }
.header { background: #00f; color: #fff; }
.slider { background: #f00; display: none; position: absolute; width: 90%; margin: 1rem 2rem; padding: 1rem }
.slider span { display: block; text-align: center; }
.container { background: #0f0; height: 2rem; }