問題タブ [transitions]

jquery エフェクトとトランジションを配置したフラッシュ Web サイトの再設計を検討しています。コミュニティに連絡して、このウェブサイトが持つ特定の移行と効果を考慮して、これが実際にどれほど実現可能かを確認したかっただけです.

リンクは次のとおりです。

http://antonynicoli.com/english.html

ギャラリーはカルーセル プラグインで再現できると思いますが、たくさんあるので、この仕事に最適な安定したギャラリーを提案できるかもしれません。どこから始めればいいのかわからない私の注意を本当に引いた他のアイテムは、ナビゲーションバーと、ナビゲーションバーのリンクをクリックしたときに本が開くように見える効果です。あらゆるご意見をお待ちしております。ありがとう。

Firefox 3.6 や IE8 などのブラウザで CSS3 トランジションを模倣する Javascript ライブラリを知っている人はいますか?

例：

そのようなライブラリを開発するのはかなり難しいと思います。

これら 2 つは多くのことをサポートしていますが、CSS3 トランジションはサポートしていません。

• CSSサンドペーパー
• CSSPie

そして、Modernizrがありますが、機能テストのみを行います。

CSS3 トランジションをサポートする追加のミニ ライブラリがあることの優れた点は、独自のバックアップ コードを記述する必要がないことです。プラグインするだけで、これらのトランジションがほとんどのブラウザーで機能することを確認できます。

私が理解していると思うときVisualStateManager、何かが私を間違っていることを証明します。

私はWPF4を使用しており、マウスオーバーでアイテムを拡大し、マウスを離すと縮小して戻します。で各状態を定義してから、：でaVisualStateGroupを指定するだけだと思いました。VisualTransitionGeneratedDuration

私はキャッチオールを持っているのでVisualTransition、GeneratedDurationVSMが中間アニメーションを生成することを期待していました。つまり、コントロールをマウスで動かすと、ScaleTransform1秒間に1から1.5までのプロパティがアニメーション化されます。マウスオフと同じです。代わりに、1秒の遅延があり、ScaleTransformプロパティは即座に1.5にスナップするか、1に戻ります。

次のようにトランジションを手動で指定すると、目的の動作が得られます。

しかし、なぜ私はこれをしなければならないのですか？生成されたトランジションの全体的なポイントは、トランジションが生成されることだと思いました。私はここで何を誤解していますか？

更新：リックの答えによると、Blendは機能するものを生成します。ScaleTransformしたがって、逆方向に作業することで、それを含むものを介してではなく、直接参照しているのは確かに事実であると判断しましUIElementた。XAMLを次のように変更しましたが、期待どおりに機能します。

ばかげているように見えますが（そして明らかなバグです）、動作します。

ありがとう

私のページには次のXAMLがあります。

次に、コードビハインドで、画像とブラウザコンテンツの間で表示を切り替えています。

と

これは正常に機能しますが、クライアントが現在望んでいるのは、画像が表示されるときとブラウザが表示されるときの間のスムーズな移行です。私はいくつかのアプローチを試しましたが、常に行き詰まりに遭遇しました。あなたはなにか考えはありますか？

スワップが行われる前に、VSMを使用して2つの状態をオーバーレイとして上に表示するよりも、2つの状態を設定しようとしましたが、うまくいきませんでした（WebBrowserの上に何も配置できないためだと思いますか？） VSMを使用した画像コントロールとWebブラウザーコントロールの可視性ですが、どちらも機能しませんでした。この単純なタスクを解決するために他に何をしようとしているかは本当にわかりません。

どんな助けでも大歓迎です。

開いた状態と閉じた状態の 2 つの状態を持つアイテムがあり、次のように表示されます。

と

そして、私がやりたいのは、フッター/ボタンブロックを移動してから円グラフにフェードインするために、2つのポイント間を滑らかな方法(正弦波)で効果的に補間することにより、1つの状態と別の状態の間の遷移をスムーズにすることです。

しかし、これは明らかに私を超えており、1時間以上そうすることができないことに取り組んだ後、ここに投稿しています:D

したがって、私の遷移ブロックは次のようになります

は{body}円グラフを{footer}指し、フッター/ボタンブロックを指します。

しかし、これはうまくいかないので、どうすればよいかわかりません...

有益な追加情報:

body ブロックは常に固定の高さです (おそらく、一部のエフェクトで Xby 変数に使用されるのでしょうか?)。

双方向で機能する必要があります。

ああ、Sineブロックは上記のように宣言で定義されてい<s:Sine id="Sine">ます。

さらに！これらの遷移ブロックを使用して円グラフを継続的に回転するように設定するにはどうすればよいですか? (これは、ラベルがオンになっていない場合に発生します) または、それ自体は遷移ではないため、間違った方法ですか?

私が求めている効果は、下のボタンを選択する前にラベルなしで円グラフがゆっくりと回転するものですが、選択すると回転が停止し、ラベルが表示されます...

よろしくお願いします！

グレースケールで申し訳ありませんが、配色を決めることはできません。どんな提案でも大歓迎です。

次の問題は何日も私を悩ませてきました、しかし私はそれを最も単純な形に蒸留することができただけです。次のXAMLを検討してください。

CheckBoxバックグラウンドが状態に依存するように、コントロールを再テンプレート化するだけです。

• チェック済み=緑
• チェックなし=赤
• チェック（遷移）=ライトグリーン
• チェックを外す（遷移）=明るい赤

したがって、チェックボックスの1つをオンにすると、短時間は薄緑色に変わり、その後緑色に変わることが期待されます。同様に、チェックを外すと、短時間は明るい赤に変わり、その後赤に変わることが期待されます。

そしてそれは通常まさにそれをします。しかしいつもではない。

プログラムを十分に長くプレイすると（約30秒で取得できます）、トランジションアニメーションが視覚的な状態よりも優先される場合があります。つまり、チェックボックスは、選択されている場合は引き続き明るい緑色で表示され、選択されていない場合は明るい赤色で表示されます。これは、トランジションが実行するように構成された3秒後に撮影された、私が何を意味するかを示すスクリーンショットです。

これが発生したのは、コントロールがターゲット状態に正常に移行しなかったためではありません。それは正しい状態にあると主張します。デバッガーで次のことを確認して、これを確認しました（上のスクリーンショットに記載されている特定のケースの場合）。

アニメーションのトレースを有効にすると、遷移が正常に完了すると次の出力が得られます。

また、遷移が正常に完了しなかった場合、次の出力が得られます。

最初の12行は遷移が成功したときとまったく同じですが、最後の10行は完全に欠落しています。

私は見つけたすべてのVSMドキュメントを読みましたが、この不安定な動作の説明を思い付くことができませんでした。

これはVSMのバグだと思いますか？この問題の既知の説明または回避策はありますか？

私の問題は、説明するよりも見る方が簡単です:

トランジション中に画像が少し動き、見栄えが悪いことがわかります。Firefox では、これは起こりません。

HTMLコードは次のとおりです（CakePHP用のphpがいくつかあり、指定されたパラメーターで書き込みますが、代わりに通常のHTMLを使用しても問題は同じです）：

-- コードを読む前に、時間を節約するために、この問題の原因であると私が理解したことについての以下の説明をお読みになることをお勧めします --

CSSは次のとおりです。

したがって、CSS の変更、新しい div の追加、div の削除、および他の多くのことを試みた後、コードから 1 行を除いてすべての行を削除すると、問題がなくなることがわかりました。たとえば、「home_title」divの高さに応じて、行と行が1つしかない場合、問題が発生したり消えたりします。たとえば、20px の padding-top と padding-bottom を追加すると、すべて問題なく、遷移の問題はありません。しかし、20px ではなく 30px を追加すると、問題が発生します。

では、上の div の高さがトランジションの動作を変更する可能性はどのようにあるのでしょうか? 間に空の div を追加しようとしましたが、問題は解決しません。問題は、スライドショーからトップまでの距離にあるようです。また、「home_slideshow」で「position:absolute」を使用して手動で配置すると、問題もなくなりました。しかし、後で必要になるレイアウトの柔軟性が失われます。

ここで何が起こっているのかについてのアイデアはありますか? 事前にどうもありがとうございました！

2 つのリスト間の遷移をアニメーション化するために、記事の 2 つのリスト間の変更を取得しようとしています。記事は、追加、削除、または移動できます (入れ替えはできません)。

ただし、一部の記事は移動できず、各トランジションで他のすべての記事をそれらの記事の下に移動する必要があります。

たとえば、各数字が記事 ID を表し、太字が不動の記事を表す場合、[1, 2 , 3, 4 , 5, 6] は [ 2 , 4 , 1, 6, 7] になる可能性があります。

必要な変更を行う必要があります。たとえば、この場合は次のようになります。

• 4 の後に 1 を移動
• 削除 5
• 6の後に7を足す

私は差分アルゴリズムを使用していますが、動かせないアイテムを理解していないため、次のように提案される場合があります。

• 2を先頭に移動
• 2 の後に 4 を移動
• 削除 5
• 6の後に7を足す

いろいろ試してみましたが、確実に動作させることができません。

ステートマシンで検証を正しく機能させる方法がわかりません。IE 公開の新しい状態を許可する前に、特定の検証を行いたい:

トランジション、私が使用しているgemにはガードメソッドがありますが、それを複数の検証に正しく使用する方法がわかりません。

次のような基本的な検証を単純に適用しようとしました：

https://github.com/qoobaa/transitions

更新: これは私が望むように機能するようですが、次の質問は、すべての検証をまとめてメソッドを簡素化するにはどうすればよいかということです。私は、それを本来よりもはるかに複雑にし、堅牢性を大幅に低下させているように感じます。何か案は？

初めてjqueryモバイルバージョンを使用します。

なぜこれが機能しないのですか？

onClickでコンテンツをフェードインさせたいのですが、発生しません。大まかに表示され、スムーズではありません。

ありがとう

プルーダ