从零开始滑动元素

我试图构建一个组件，其中任意宽度和高度的元素从页面上的“不可见狭缝”向下滑动。我不想依赖于隐藏在其他元素后面，因为滑落的元素可能会更高，因此在滑下之前会出现在其上方。有点像下面没有可见的狭缝。我试图弄清楚如何设置不可见的父元素的样式，以便带有内容的孩子可以从“内部”滑出。剪辑路径在这里工作吗？还要别的吗？从零开始滑动元素

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

来源

2017-06-23 Jim Cote

你尝试过什么到目前为止，如果有什么？ – NewToJS

我们需要看看你到目前为止。 JQuery是这个功能的好库。你使用它/你会用它吗？ – KyleS

使用jQuery [slideDown]（http://api.jquery.com/slidedown/）而不是“隐藏”（重叠）元素。如果你可以使用jQuery使用CSS和triger动画... –

你应该有一个容器，设置在其中会出现滑动的观点，说#slider_wrapper
设置溢出隐藏
动画幻灯片中的元素。

来源

2017-06-23 19:43:21

'overflow：hidden'将阻止孩子出现在父母之外。 –

是的，它会做到这一点。 –

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

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

来源

2017-06-23 19:48:36

概念在这里是如何它可能看起来像：

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

来源

2017-06-23 20:18:06 Samich

从零开始滑动元素

回答

相关问题