jquery - 如何在 CSS 中创建 iOS 样式的 Actionsheet 弹出窗口？

Question

我正在尝试使用 CSS 和 javascript/jquery 创建一个在屏幕外弹出的操作表弹出窗口。

为了解释我想要实现的目标，如果您查看 https://framework7.io/ 中的 Sheet Modal您可以准确地看到我想要实现的目标。

目前，我的操作表显示在页面上，但没有向上滑动。它只是出现了。

这是我到目前为止所做的:

$(document).on('click','.showBtn',function(e){

$('.modal-in').css('bottom', '0');

});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

element.style {
    height: auto;
    display: block;
}

.main{
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;

}



.sheet-modal.modal-in {
  
  
  position: absolute;
bottom: -850px;
left: 0;
width: 100%;

padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    display: block;
 transform: translate3d(0,0,0);
    
    
}

.sheet-modal.modal-in, .sheet-modal.modal-out {
    transition-duration: .3s;
}

.demo-sheet-swipe-to-close, .demo-sheet-swipe-to-step {
    --f7-sheet-bg-color: #fff;
    --f7-sheet-border-color: transparent;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

.sheet-modal {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--f7-sheet-height);
    display: none;
    box-sizing: border-box;
    transition-property: transform;
    transform: translate3d(0,100%,0);
    background: var(--f7-sheet-bg-color);
    z-index: 12500;
    will-change: transform;
}



.swipe-handler {
    height: 16px;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    background: #fff;
    cursor: pointer;
    z-index: 10;
}

.page-content {
    will-change: scroll-position;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    z-index: 1;
    padding-top: calc(var(--f7-page-navbar-offset,0px) + var(--f7-page-toolbar-top-offset,0px) + var(--f7-page-subnavbar-offset,0px) + var(--f7-page-searchbar-offset,0px) + var(--f7-page-content-extra-padding-top,0px));
    padding-bottom: calc(var(--f7-page-toolbar-bottom-offset,0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom,0px));
}

.swipe-handler:after {
    content: '';
    width: 36px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -18px;
    margin-top: -3px;
    border-radius: 3px;
    background: #666;
}

.block-title-large {
    font-size: 20px;
    color: #000;
    line-height:40px;
    padding:10px;
    margin-top:20px;
}

.block {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    color: #000;
    padding:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<div class="main">

<button class="showBtn">
Show
</button>

<div class="sheet-modal demo-sheet-swipe-to-close modal-in" style="">
<div class="sheet-modal-inner">
<div class="swipe-handler"></div>
<div class="page-content">
<div class="block-title block-title-large">Hello!</div>
<div class="block">
<p>Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae adipisci vel voluptatum, autem libero minus dignissimos repellat.</p>
<p>Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?</p>
</div>
</div>
</div>
</div>

</div>

https://jsfiddle.net/6oa2jxfd/

Answer 1

动画设置为仅动画 top，而不是 bottom，将此行 transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 更改为transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);

.sheet-modal.modal-in {
  position: absolute;
bottom: -850px;
left: 0;
width: 100%;

padding: 20px;
transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    display: block;
 transform: translate3d(0,0,0);
}

http://jsfiddle.net/67sbnh3w/