javascript - 如何使效果从上到下1页像android标题栏一样使用css3

Question

我正在尝试使 html 中的效果看起来像在 android 中从上到下拉动标题栏的效果。

有人知道怎么做吗？或者我需要什么工具？

当我滑动时，页面只显示跟随动画但不跟随我的手指

我是新手。请帮助我。

感谢阅读!!!

这是我尝试的 CSS:

.myanimation {
      animation : mymove .3s linear;
      -webkit-animation : mymove .3s linear;
}
.removeanimation {
    animation : remove .3s linear;
    -webkit-animation : remove .3s linear;
}
@keyframes mymove
{
    0%   {width: 20%;}
    25%  {width: 40%;}
    50%  {width: 60%;}
    75%  {width: 80%;}
    100% {width: 100%;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    0%   {width: 20%;}
    25%  {width: 40%;}
    50%  {width: 60%;}
    75%  {width: 80%;}
    100% {width: 100%;}
}
@keyframes remove
{
    0%   {width: 100%;}
    25%  {width: 80%;}
    50%  {width: 60%;}
    75%  {width: 40%;}
    100% {width: 20%;}
}

@-webkit-keyframes remove /*Safari and Chrome*/
{
    0%   {width: 100%;}
    25%  {width: 80%;}
    50%  {width: 60%;}
    75%  {width: 40%;}
    100% {width: 20%;}
}

这是 javascript(我使用 hammer.js):

$(".play").hammer().on("swiperight", function (event) {
        $('#mainSetting').removeClass('hide');
        $('#mainSetting').removeClass('removeanimation');
        $('#mainSetting').addClass('myanimation');
        $('#mainSetting').css("width","100%");
    });

    $("#mainSetting").hammer().on("swipeleft", function(event) {
            $('#mainSetting').removeClass('myanimation');
            $('#mainSetting').addClass('removeanimation');
            $('#mainSetting').css("width","10%");
            setTimeout(function(){$('#mainSetting').addClass('hide')},400);
    });

Answer 1

尚未测试，但结合 fiddle ，您可以简单地将用于打开和关闭点击的 jQuery 替换为 hammer.js 实现。它会是这样的:

var animate = $('.animate');

var hammeropen = Hammer(element).on("swipedown", function(event) {
    $('animate').addClass('open');
});

var hammerclose = Hammer(element).on("swipeup", function(event) {
    $('animate').removeClass('open');
});

至少根据 hammer.js 文档。

对于 CSS，您只需要为您想要的元素使用它，就像从上向下滑动的 android 顶部栏一样:

.animate {
    position:fixed;
    left:0;
    right:0;
    background:#333;
    top:0;
    bottom:90%;
    max-height:20px;
    transition:all 0.5s ease;
    z-index:2;
    text-align:center;
    color:#fff;
}

.animate.open {
    bottom:0;
    max-height:100%;
}