問題タブ [css-transitions]

iPadアプリでWebキットトランジションを使用しています。彼らは素晴らしい働きをします。しかし、JavaScriptを使用してトランジションの値を変更するにはどうすればよいのでしょうか。

私がしたいこと：

これは可能ですか？

-webkit-transitionで使用する方法はありdisplayますか？

私は CSSdisplayを使用して、ナビゲーションの第 2 レベルを表示および非表示にしています…しかしdisplay: none、display: blockオンのみ:hoverは少し魅力的ではありません…aeaseは素晴らしいでしょう (のように-webkit-transition: display 300ms ease-in;)

jQueryでこれを行うのはかなり簡単ですが、私は現在CSS3ですべてをセットアップしようとしています(私は知っています:すべてのブラウザーがそれをサポートしているわけではありませんが、それは私が現在取り組んでいるこの1つのプロジェクトには関係ありません)

ここにいくつかのコードと構造があります: ( にli.menu1は:hoverwithがありますsection.nav-menu1 {display: block;})

私の CSS ファイルでは、divトランジション用のクラスを定義しています。

次に、私の JavaScript で (jQuery 経由で) 動的な dom 要素を追加します。

しかし、移行は開始されません。

なんで？

いくつかの情報を表示するテーブルがあります。私が達成したいのは、ユーザーが行をクリックして、その行の情報に関連するメモをその行の下に表示できるようにすることです。

気の利いたCSSトランジション機能を使用できるように設定しようとしているので、情報行の下の非表示の絶対位置の行にメモを配置するだけでは問題ありません。CSSトランジションはpositionスタイルに影響しません。

メモがに入るように設定しましたdiv。ユーザーがテーブルの行をクリックすると、onClickイベントがJavascript関数を呼び出してdiv表示します。必要なのは、選択したテーブル行の下にdivを並べるだけです。

テーブル行の高さと位置を取得するにはどうすればよいですか？私はそれを使ってを配置できると思いますdiv。または、これを行うためのより良い方法はありますか？

これが私が持っているものの例です：

divのinnerHTMLを変更するときに、フェードイン/フェードアウト効果を実行しようとしています。サファリドキュメントで与えられた例を試してみました

divをフェードアウトし、コンテンツを変更してから、新しいコンテンツで再度フェードインします。

ここで私を助けてください

高さが最大 ​​( JQuery のプログレッシブ show のように) まで成長しているかのようにブロック要素を表示し、その後の要素をスムーズに「プッシュ」して成長させたいと考えています。

固定height( max-height0 から必要なサイズにする) では簡単ですが、0 から変更height: autoすることはできません(要素の高さはずっと 0px で、突然アニメーションの 100% で表示されます)。max-heightnone

transformからまでの範囲を試しましscaley(0)たscaley(1)が、高さはトランジションの最初から自動的に「予約」されます (したがって、挿入された要素の後のコンテンツは、滑らかで漸進的なプッシュではなく、残酷に下にシフトされます)。

このcss3エフェクトのjqueryバージョンを作成して、ffおよびieでも機能するようにします。

私の試みはうまくいきませんでした、これが私がこれまでに得たものです。

これを修正する方法はありますか？どうもありがとうございます！

ホバーが div を下向きに成長させる次の HTML がありますが、上向きに成長させたいと思います。

ホバー時に遷移を元に戻すにはどうすればよいですか?

Webkit の遷移終了イベントは webkitTransitionEnd、Firefox は transitionEnd、opera は oTransitionEnd と呼ばれます。純粋なJSでそれらすべてに取り組む良い方法は何ですか? ブラウザのスニッフィングを行う必要がありますか? またはそれぞれを個別に実装しますか？私には思い浮かばなかった他の方法はありますか？

すなわち:

また

CSSトランジションは、CSSプロパティの変更をアニメーション化するための非常に優れた方法です。Internet Explorerのいずれかのバージョンがそれらをサポートしていますか？