Javascript 如何使用css3实现从上到下的效果，如android标题栏

我试图使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）：

---

您还没有测试过，但结合fiddle，您可以用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%;
}

---

发布你所拥有的，triedI更新了我所尝试的。但是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%;
}