0

我正在尝试使 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);
    });
4

1 回答 1

0

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

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%;
}
于 2013-07-26T09:10:40.360 回答