3

こんにちは私はtransitionボタンが押されたときに呼び出される私の問題を抱えています。私が混乱している理由は、以前は機能していたのですが、別の場所に移動したのですがdiv、今はそうではありませんか？私がそれが機能しないことを意味するとき、私は関数が機能し（それが何かをするように）そしてそれからコールバックを実行することを意味します、しかしそれがクラスを切り替えるときそれはそれを「アニメート」しません。アニメーション時間が終了するまでそこdivにとどまり、それからそれを隠すコールバックを実行します。

つまり、基本的には非表示にするだけで、スライドアウト効果をアニメーション化することはできません。

残りのswitchClass機能は、ページをスライドさせて戻す機能でも正常に機能します。

正しく機能していないコード：

function hidepage() {
        $( ".PageShow" ).switchClass("PageShow", "PageHide", loadpanel);
// Alternative $( "PageContainer" ).switchClass("PageShow", "PageHide", loadpanel);
    };

そしてそれに伴う残りのコード...

CSS：

#PageContainer {
   margin-top:120px;
   width:100%;
}

.PageShow {
   position:fixed;
   -webkit-transform:translate(0px,0px);
   -moz-transform:translate(0px,0px);
   -ms-transform:translate(0px,0px);
   -o-transform:translate(0px,0px);
   transform:translate(0px,0px);
   transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
   transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -webkit-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   transition-timing-function: ease-out;
   -moz-transition-timing-function: ease-out;
   -webkit-transition-timing-function: ease-out;
   -o-transition-timing-function: ease-out;
}

.PageHide {
   position:fixed;
   -webkit-transform:translate(-100%,0px);
   -moz-transform:translate(-100%,0px);
   -ms-transform:translate(-100%,0px);
   -o-transform:translate(-100%,0px);
   transform:translate(-100%,0px);
   transition-duration: 0.5s;
   -moz-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-timing-function: ease-out;
   -moz-transition-timing-function: ease-out;
   -webkit-transition-timing-function: ease-out;
   -o-transition-timing-function: ease-out;
}
4

2 に答える 2

2

メソッド.switchClass()をに変更する.removeClass()と、.addClass()機能します。このjsFiddleを見てください。2つの関数があります。1つはとを使用する関数.hidepage()で、もう1つはを使用する関数です。.removeClass.addClass.hidepagetwo().switchClass()

本当の間違いは次のとおりです。});最後に欠落があります。少なくともjsFiddleでは、これを追加した後にコードが機能します。

于 2012-12-25T13:16:17.490 に答える
1

switchClassを誤って使用しているようです。APIドキュメントは次のとおりです。

http://api.jqueryui.com/switchClass/

このメソッドは、2つの必須パラメーターと3つのオプションパラメーターを使用することに注意してください。loadpanel（それがコールバック関数の場合）を3番目のパラメーターに詰め込むことはできません。これは、5番目のパラメーターに属しているためです。この場合、コールバック関数が期待どおりに終了するように、3番目と4番目の値を指定する必要があります。

また、CSSの移行作業がたくさん行われていますが、私の理解では、switchClassは2つのクラス間でjavascriptアニメーションを実行します。上記のリンクで例がどのようになっているのか見てください。あるクラスではbeforeスタイルを指定し、別のクラスではafterスタイルを指定する必要があります。switchClassはその中間を補間し、すべてのCSSトランジションなしでアニメーションを実行します。

これらのCSSアニメーションはすべてクラスに配置されているので、別のアプローチは、クラスをオン/オフするだけのjQueryのtoggleClassを試すことです。http：//api.jquery.com/toggleClass/

于 2012-12-25T13:12:06.473 に答える