問題タブ [css-transitions]

CSS コード:

HTML コード:

トランジションは、境界線以外のすべての要素で正常に機能しています。400 ミリ秒の終わりに表示されるだけで、境界線には影響しません。

私が達成しようとしているのは、新しい Google Gmail ボタンのような効果です。

助けてくれてありがとう

テキストを含む小さな div を含む div があります。コンテナ div には、画面外に移動する Webkit トランジションがあります。小さい div をページの端に到達するまで移動させてから、ページの端に「スタック」するかのように固定したままにしますが、コンテナ div はその下を移動し続けます。視力。これはできますか？

奇妙な問題が発生したときに、オーバーレイ div をフェードインするために CSS3 トランジションをいじっていました。

基本的に、id にスタイルが設定された div 要素があります。つまり、背景色: #000、不透明度: 0 などです。ブラウザ固有のトランジション スタイルも同様です。デフォルトでは、オーバーレイ要素には「hiddenElement」クラスがあり、表示が none に設定されています。

オーバーレイが表示される場合、hiddenElement クラスが削除され、別のクラスが「初期化」されて追加されます。このクラスは要素の不透明度を 0.6 に設定します。

私が期待していたのは、要素がスムーズにアニメーション化されることでした。これは Opera で発生しますが、firefox と chrome ではまったく同じようには機能しません。

ここで孤立したケースを作成しました: http://jsbin.com/obojet/27/。

「addClass('Initialized')」が setTimeout() でラップされている場合にわかるように、クロムで 0 ミリ秒のタイムアウトを使用しても、正しくアニメーション化されます。タイムアウト外で addClass を実行するだけでは、アニメーションは実行されません。Firefox では、タイムアウトを長くする必要があります (50 ミリ秒)。オペラではそれがうまくいきます。

おそらく単一スレッドをめぐって UI/Javascript が競合していることが原因ですが、他の誰かが同様の問題を経験したことがあるかどうかに興味がありました.

要素を表示から非表示にフェードしたい。

私はこれを使用してこれを行うことができることを知っています:

これに関する問題は、(現在) 非表示の要素がまだ存在し、スペースを占有していることです。

設定されているかのように、フェードしてから完全に消えてほしいdisplay:noneです。

HTML5 ビデオとトランジションに問題があります。ビデオの上に作成した 2 つのトランジション ボタンがはっきりと見えますが、クリックできません。ビデオはクリックをキャプチャするようです。

誰かが解決策を持っていますか?

css トランジションが利用可能かどうかを判断するために javascript で modernizr を使用していますが、javascript を使用せずに css トランジションが機能しているかどうかを確認する方法はありますか?

JavaScriptを使用せずに、ページの読み込み時にCSS3トランジションアニメーションを使用することは可能ですか?

これは私が望むもののようなものですが、ページの読み込み時:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

これまでに見つけたもの

• CSS3 transition-delay、要素への影響を遅らせる方法。ホバー時のみ動作します。
• CSS3 Keyframeはロード時に動作しますが、非常に遅いです。そのせいで役に立たない。
• CSS3 トランジションは十分に高速ですが、ページの読み込み時にアニメーション化されません。

CSS3 の台頭に伴い、mootools アコーディオン クラスで使用されるアニメーションを css トランジションを介して制御したいと考えています。これを行う最善の方法は、アクティブなクラスをアコーディオンのトグル部分と要素部分の両方に割り当てることだと考えています。

トグル要素に対してそれを行うことができましたが、何度も試みた後、要素にアクティブなクラスを与える方法がわかりません。

これまでに入手したmootoolsコードは次のとおりです。

誰かがこれを手伝うことができれば、私は最も感謝しています。

オブジェクトを取得し、事前に設定されたトランジションにアニメーション化することなく、rotateY プロパティを変換する簡単な方法を探しています。これは、このスライド ショーを完成させるのに役立ちます(Chrome または Safari (WebKIT) でのみ表示)

効果の内訳の例を次に示します。

CSS - 遷移は 5 秒に設定されています

フェーズ1

Element1 - 回転 Y:0;

Element2 - 回転 Y:-180;

ユーザー- ボタンのクリック

フェーズ2

Element1 - 回転 Y:180;

Element2 - 回転 Y:0;

Phase3

Element1 - 回転 Y:-180;

Element2 - 回転 Y:0;

ユーザー- ボタンのクリック

Phase4

Element1 - 回転 Y:0;

Element2 - 回転 Y:180;

最初のトランジション (フェーズ 1 & 2) が完了した後、フェーズ 1 でElement2があった位置になるように、Element1 のrotateY値をトランジションなしで -180 に設定する必要があります。これにより、私が提供したリンクの例でわかるように、アニメーションによって要素が互いに回転しているように見えます。残念ながら、すべての要素がrotateY:180になると、効果はなくなります。

jsFiddle をやりたいのですが、今はこのプロジェクトに時間がありません。

アニメーション/トランジションなしで、オブジェクトをポイント a からポイント b に移動するだけのソリューションが必要です

すべてが理にかなっていることを願っています