問題タブ [transitions]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
1505 参照

silverlight - 特定のトランジションを爆発させずに視覚状態間をアニメーション化する

Silverlight で実装しようとしている非常に単純なシナリオのように見えるものがありますが、Silverlight/Blend 4 の信じられないほど強力なトランジション機能にもかかわらず、その方法がわかりません。

私はこれに要約するレイアウトを持っています:

最初は、4 つのページ グリッドがすべて非表示になっており、サイズが 0 になっていますが、対応するボタンをクリックすると、ページが拡大するアニメーションで表示されます。別のボタンをクリックすると、縮小アニメーションで前のページが消え、拡大アニメーションで別のページが表示されます。このように、ボタンを使用して 4 つのページすべてに移動できます。

私が読んだことから、これを行う「正しい」方法は、ユーザーコントロールで視覚的な状態を使用することです。そのため、Page1 から Page4 までの 4 つの状態を作成し、各状態に対して適切なページ グリッドを表示するように設定しました。次に、ボタンにコマンドを配置して、ユーザー コントロールの表示状態を変更します。これは問題なく機能し、ページを切り替えることができましたが、状態間のアニメーションを定義しようとしたときに問題が発生しました。

最初は、状態ごとに「To *」と「From *」のアニメーションを定義できると思っていました。したがって、状態 Page1 でボタンをクリックして状態 Page2 に移動すると、Page1 を非表示にする「From *」アニメーションが再生され、次に Page2 を表示する「To *」アニメーションが再生されます。しかし、これはうまくいきません。各状態に対して 'To *' および 'From *' アニメーションを定義した場合でも、Silverlight は 'To *' アニメーションのみを再生し、'From *' アニメーションを完全に無視します!

さらに悪いことに、この動作は、まったく意味がありませんが、Silverlight が動作するはずの方法のようです! つまり、各ページを縮小し、その場所で別のページを拡大したい場合、各状態から他の各状態への個別の遷移を定義する必要があります! 現在の 4 ページの場合、これは 12 の個別のトランジションを意味しますが、ページ数を増やしたい場合、この数は急増します。10 ページの場合、9*9 = 81 回のトランジションが必要です! 現在のページを縮小し、新しいページを拡大するためのすべて。

このような単純なシナリオと思われるものを処理するためのより良い方法がないとは信じられませんが、方法を説明しているようには見えません。ストーリーボードを変更する分離コードを使用して一緒にハックすることもできますが、Blend でページ グリッドを表示および編集できるようにしたいと考えています。

明らかな何かが欠けていると教えてください。

0 投票する
1 に答える
451 参照

silverlight - Silverlight/WP7 の現在のコントロールをトランジションに置き換える方法は?

2 つのコントロールを持つ Wp7 があります。1 つはマップ、もう 1 つはパノラマ コントロールです。パノラマ アイテムの 1 つに、値のリストがあります。ユーザーがリスト アイテムをクリックすると、詳細を表示する新しいコントロールへの改札口の遷移を表示したいと考えています。

これまでの XAML では、LeftMouseUp にバインドされたイベントがあり、それがトリガーされます。ただし、現在のパノラマ項目を新しいコントロール (ビュー) に置き換える方法、または 2 つの間で Silverlight ツールキットによって提供される TurnstileTransition を使用する方法がわかりました。

0 投票する
1 に答える
6008 参照

webkit - Safari -webkit-transition-property : スケールおよび/または背景サイズのアニメーション化

背景画像でいくつかの div をアニメーション化したいと思います。ページ上の位置を移動して大きくしたい。

クラスを追加することで、jQuery を介してこれを行います。これにより、Webbit の CSS3 変換がトリガーされます。

私はこれから始めました:

そのスタイルを追加すると、DIV の幅と高さが変更され、新しい上部の位置に移動しますが、背景のサイズは変わりません。

それで、私はこれを試しました:

しかし、同じ問題。トップはアニメーションしますが、スケールはアニメーションしません。

これは単なる構文エラーだと思います (願っています)。それとも、-webkit プロパティを移行することはできないのでしょうか?

0 投票する
1 に答える
569 参照

jquery-plugins - jQuery サイクル プラグイン: 混合コンテンツのスライドショー div 内でページャーを遷移させる

私は Malsup のすばらしい jQuery サイクル プラグインを試していて、ちょっとした問題にぶつかりました。トランジション div で混合コンテンツを使用していますが、うまくいきました。この問題は、遷移 div 内でページャーを使用すると発生します。基本的に、各 div に沿ってページャー リンクを遷移させたいので、各遷移 div 内にページャー div を含めました。

$(document).ready(function() { $('#slider').cycle ({ fx: 'scrollLeft', timeout: 10000, speed: 500, pager: '#pager' }); }); 画像 テキスト テキスト テキスト 今すぐお試しください!

ページャーは最初のスライドで問題なく表示され、希望どおりにトランジションします。最初の 2 つのページャー div に入力したテスト文字は表示されますが、次の 3 つのトランジションでは表示されません。ここで私が見逃しているのは何ですか?

0 投票する
1 に答える
525 参照

c# - Silverlight の動作で画面遷移を管理する

私のアプリ ルート ビジュアルは、常に固定されたままのボーダー パネルです。変更内容は、ボーダー パネルの子です。いくつかの画面 (UserControl) を作成しましたが、各画面内の特定のボタンがクリックされたときにそれらを切り替えたいと考えています。

各画面に 2 つの StoryBoards があり、1 つはスライド イン アニメーション用で、もう 1 つはスライド アウト アニメーション用です。(より明確にするために、たとえば、screen1 のアニメーションのスライドは、screen1 のボタンとフィールドを特定の方法で、最終的な位置に到達するまでビュー領域に移動します)。

私の目標は、これらの画面遷移を Behavior で実現し、可能な限り少ないコードで画面に適用することです (XAML のみが最適です)。

まず、すべてのアプリ画面が実装する新しいインターフェイスを定義します。

そして、screen1 のコード ビハインドは次のようになります。

AnimationOut と AnimationIn は、画面ごとに Blend で作成した StoryBoard です。

ここで、遷移を管理するための動作を書きたいと思います。この動作はボタンで動作します。2 つのプロパティを持つことになります。1 つは、Panel タイプの OldScreenContainer で、削除する画面のコンテナーを表します。2 番目は IScreenWithTransitions 型の NewScreen で、コンテナー内に配置する新しい画面を表します。

たとえば、ルート ビジュアルの名前が Border1 で、現在、Button1 というボタンを持つ Screen1 という子が含まれているとします。ボタンがクリックされたときに Screen2 に切り替えたいので、Border1 を OldScreenContainer プロパティとして、Screen2 を NewScreen プロパティとして Button1 に SwitchScreensBehavior を配置します。

このコードはコンパイルされます。Blend でこの動作を確認し、ボタンにドラッグできます。しかし、どうすれば動作の 2 つのプロパティを設定できますか? Blendはそれらを表示しますが、それらを新しい画面とコンテナに向ける方法がわかりません(新しい画面が実行時に作成された場合)。そのため、 XAML を使用してこれらのプロパティを定義しようとしましたが、その方法がわかりません。多分それらをコード内で定義しますか?

それとも、この機能が動作に対して大きすぎて、他の洗練されたソリューションが存在する可能性があります (可能な限り多くの XMAL に依存しています)。

0 投票する
3 に答える
26998 参照

android - フラグメントとバックスタックのアニメーション化

FragmentTransactions をバック スタックからポップしてカスタム アニメーションを処理する方法を使用または理解するのに問題があります。具体的には、「アウト」アニメーションを呼び出すことを期待していますが、そうではないようです。

フラグメント トランザクション (FragmentTransaction) を処理する簡単な方法があります。ここでは、フラグメントを追加し、カスタム トランジションを適用して、フェードイン/フェードアウトします。また、これをバックスタックに追加して、ユーザーが戻るボタンでそのトランザクションを元に戻し、基本的にフラグメントが追加される前の状態に移動できるようにします。

すべてがうまく機能しますが、ユーザーが戻るボタンをクリックしても、遷移アニメーションは元に戻りません。私が予想していたのは、フラグメントが削除されると、フェードアウト アニメーションが使用されるということでした。代わりに、(アニメーションなしで) ポップアウトするように見え、その後、コンテナーがフェードインするように見えます。これが正確に起こっていることかどうかはわかりませんが、フラグメントは確実にフェードアウトしていません。

私のアプリケーションは互換性ライブラリを使用してフラグメントのサポートを追加していますが、これは Honeycomm (android-11) にも適用できると想定しています。ここで私が何か間違ったことをしているだけなのか、それとも期待しすぎているだけなのか、誰か知っていますか? 理想的には、Gmail (Xoom の場合) がメッセージをクリックして先に進み、[戻る] ボタンを使用して戻るのと同じように、フラグメントをアニメーション化したいと考えています。戻るボタンの機能を無効にして、自分のフラグメント状態に追いつく必要がないことが望ましいです。なぜなら、取り消したいいくつかの「トランザクション」がある可能性があり、私は車輪を再発明するのが好きではないからです。

Android Developers Group でも質問されています: http://groups.google.com/group/android-developers/browse_thread/thread/1136a3a70fa0b6e9

0 投票する
2 に答える
2110 参照

apache-flex - Flex 4では、状態遷移は両方向にサイズ変更されません

私には2つの州があります。OFFからAに切り替えると正しくサイズ変更されますが、AからOFFに切り替えると、スムーズなサイズ変更の移行が行われません。私は何が間違っているのですか?

これが私のコードです:

よろしくお願いします、ヌーノ

0 投票する
1 に答える
521 参照

apache-flex - Flex 4では、状態遷移は両方向にサイズ変更されません(v2)

私はすでにこの問題について別の質問をしましたが、それはうまく解決されました。しかし今、少し異なる例で、私は再び立ち往生しています。

私には2つの州があります。AからBに切り替えると、正しくサイズ変更されますが、BからAに切り替えると、スムーズなサイズ変更の移行が行われません。私は何が間違っているのですか?

これが私のコードです:

よろしくお願いします、ヌーノ

0 投票する
1 に答える
1008 参照

iphone - iPad:CATransform3DMakeRotationフリッピングの問題:ビューの半分が表示されない

imageviewを90度回転させてから反転させるコードを作成しました。ただし、フリップは画像の半分を切り取っているようです。なぜこれが起こるのですか?

0 投票する
1 に答える
207 参照

css - タイマーを無視するオペラcss3トランジション? - バグまたは機能?

ここで小さなアニメーションの実験メニューを行いましたhttp://jsfiddle.net/NWvSQ/1/

Opera では、項目の外にカーソルを合わせると、アニメーション化されるのではなく、境界線の半径がすぐに元に戻ります (項目が一瞬正方形のようになります)。Chrome と Firefox では問題ないようです。

それはバグですか、それとも機能ですか?利用可能な修正はありますか?

ありがとう