0

私はhtmlの効果をアンドロイドで上から下に効果プルタイトルバーのように見せようとしています。

誰でもそれを行う方法を知っていますか? または、必要なツールは何ですか？

スワイプすると、ページはフォロー アニメーションを表示するだけで、指をフォローしません

私は初心者です。助けてください。

読んでくれてありがとう！！！

これは私が試した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

テストはしていませんが、フィドルと組み合わせると、クリックで開閉するための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%;
}
于 2013-07-26T09:10:40.360 に答える