0

「状態」と呼ばれるノックアウトjsの監視可能な変数が1つあり、その変数を使用して、以下のようなif条件でノックアウトのコンテンツを非表示および表示しています。

<--if: state()=="login" -->
login content
<--/if-->

<--if: state()=="registration" -->
registration content
<--/if-->

状態変数が変化するたびに、コンテンツを表示または非表示にします。だから私の質問は、これを非表示または表示するときにトグル動作のアニメーションを追加したいということです。どうすればそれができるでしょうか?

4

4 に答える 4

3

私はあなたのために簡単なフィドルをしました。

http://jsfiddle.net/ujSvb/1/

より動的な例

http://jsfiddle.net/ujSvb/2/

于 2012-08-31T11:32:47.683 に答える
0

要素をレンダリング解除しないため、上位投票の回答は解決策ではありません。

オースティンの答えはまったく機能していないようです。

私の回答を参照してください: Animation before 'with' binding update

私が発見したクリーンな回避策として、「if」と「with」をほぼ同等の「テンプレート」バインディングに置き換えます。

于 2014-02-11T23:19:32.783 に答える
0

まず、コードにエラーがある可能性があると思います(間違ってコピーしただけかもしれません)が、次のようにする必要があります。

<-- ko if: state()=="login" -->
login content
<--/ko-->

<-- ko if: state()=="registration" -->
registration content
<--/ko-->

2 つ目は、次のような仮想要素を使用する代わりに、要素のバインディングと共に jQuery を使用できる場合です。

<div data-bind="if: state()=="login">

Knockout のbindingHandlersを利用できます。あなたが望むことをするifTransitionバインディングを作成しました。これは bindingHandler のフィドルと実際の動作のサンプルです:

http://jsfiddle.net/Rynan/vtPT8/

アップデート

さて、仮想要素を利用するようにフィドルを更新しましたが、探している遷移効果を得るには、ログインと登録のコンテンツを div 内にラップする必要があります。あなたのコメントを維持すると、状態がそれらの特定のコンテンツを表示するために必要なものに変わるまで、その div はレンダリングされないため、正しい状態にない間は多くのメモリを消費しません。

于 2012-08-31T15:03:06.390 に答える
0

Anders のフィドルをさらに更新して、状態条件を追加しました。

http://jsfiddle.net/ujSvb/3/

于 2012-08-31T15:10:06.727 に答える