問題タブ [css-transitions]

iPad用に構築しているWebアプリのdivをフェードインしようとしています。iPadはjQueryのfadeIn（）メソッドを使用しようとしてチョークするので-webkit-transition: opacity 1s linear、javascriptを使用して遷移を実行し、不透明度を0または1に変更しようとしています。フェードの終わりにかなり耳障りにちらつくことを除いて、それはかなり滑らかに見えます。

少し前にここで学んだように、設定するとこのちらつきはすぐに消え-webkit-backface-visibility: hiddenます。残念ながら、その設定を行うと、divはそれを閉じるために使用されたクリックイベントまたはタッチスタートイベントを検出しなくなります。インスペクターでそのプロパティを削除すると、クリックが完全に読み取られるため、これが問題であると確信しています。SOに関するコメントで、他の誰かが同様のバグについて言及しているのを見つけましたが、解決策は示されていません。

誰かがこれを回避する方法について何かアイデアがありますか？

要素の高さが0から30に変わったときにアニメーションを表示するようにこのスタイルを設定しています：

ただし、要素の高さが30から0に変化したときのアニメーションも表示されます。2番目のアニメーションを回避するにはどうすればよいですか？

ありがとう。

私はiOSSafariタッチベースのアプリを構築していますが、CSSの遷移と変換がうまく機能していることがわかりました。

しかし、JavaScriptとCSSだけでは達成できないと思われることが2つあります。

1. 通常、要素を0.2秒の持続時間で変換する必要があります。しかし、コードでは、時々即座に翻訳したい（初期配置）。期間を0に更新するか、遷移スタイルを完全に削除すると、効果がないように見えます（0.2sが不変であるかのように動作します）

2. ズームするときに、transform-originプロパティを更新したいと思います。これも機能していないようで、元のスタイルシート設定値に固執しているようです。具体的には、gesturestartイベントとgestureendイベントでこれを実行しようとしています

うまくいけば、これを機能させるためのアプローチがあります。たぶんsetTimeout非同期処理？

アップデート：

＃1の問題をよりよく説明するためのjsフィドルの例があり、setTimeoutで修正されることがわかりましたが、これは私が改善したいと思う奇妙な解決策です。

http://jsfiddle.net/w9E7t/

これらの手順を同期的に実行できないようです。

1. 即時移行のための適切なクラスを設定する
2. トランジションスタイルを適用する
3. クラスをデフォルト（遷移あり）状態にリセットします

ホバー時に不透明度が変化する HTML 要素があります (CSS3 トランジションを使用)。問題は、Firefox (少なくとも Windows 上) では、要素 (<div>) 内のテキスト (<p>) が不透明度の変更中に知覚的に暗くなり、その後、分数であるべき方法に「ポップバック」することです。トランジションが終了してから 1 秒後。このように（ビデオ）：

http://screencast.com/t/zzWc9EF8wq4c

この問題は Chrome では発生しません。

これを引き起こしている可能性のあるアイデアはありますか？回避策はありますか？

ブラウザーが Javascript を使用して (modernizr を使用せずに) CSS トランジションをサポートしていることをどのように検出しますか?

1 つの要素で個々の CSS3 トランジションのチェーンを 1 つずつ実行する、構文的にクリーンなソリューションは何ですか? 例：

• 左を 10px に、不透明度を 1 ～ 200ms に設定します。
• 左を 30px から 500ms に設定
• 左を 50px に、不透明度を 0 ～ 200ms に設定します。

これは JavaScript なしで実行できますか? そうでない場合、JavaScript できれいにコーディングする方法は?

HTML 構造

画像にはドロップシャドウがあるためborder、画像の外側になるため、解決策ではありません

境界線に遷移があり、FF ではスムーズに動作しますが、chrome や他のブラウザーでは動作しません

これが私が使用したコードです

ノート：

:after を実装できるように、各画像が div でラップされているコンテナーのみです。

CSS3 変換を実行したい: 回転 (360 度); 遷移中 1s; 別の画像（要素）の代わりに背景画像に..これは可能ですか？私はGoogleで地獄を検索しましたが、成功しませんでした! 私が達成しようとしているのは次のようなものです:

これが可能であることを願っています！私はそれがJS（jQuery）で簡単に実行できることを知っています：

…でもCSS(3)だけで出来るのか知りたい

HTML:

prependメソッドにコールバックを追加することは可能ですか？DOMが再構築されるまで待ってから、フェードアニメーションを開始する必要があります。

アニメーションはCSS3トランジションで作成されているため、DOMの準備が整うのを待ってから、CSSの不透明度を変更するだけです。

これが私の問題をいじくりまわします...

CSS3 トランジションに欠陥が見つかったようです。うまくいけばそうではありません。ここにジレンマがあります。

トランジションはこのようにはまったく機能しません。display:none 属性を削除しても機能しますが、この場合、リンクに display:none 属性が必要なので、ホバーする前にインターフェイスできないようにします。

何か案は？

素晴らしい