問題タブ [webkit-transition]

-webkit-transitionHTMLページの効果に問題があります。ページはここにあります：

http://www.newerawrestling.co.uk/new/

基本的に、メインセクション内のリンク（<section>それぞれタグでマークアップされている）の色が壊れているように見えます。それらはオフホワイト（＃F5F5F5）で、ホバー時にゴールド（＃FFCC00）に移行する必要がありますが、ホバー時に白とゴールドの両方の間で灰色とちらつきとして表示されますが、正常に動作しません。

HTMLとCSSの両方を検証しました。CSSで渡されたHTMLは、CSS3セレクターと宣言を含めることができませんでした（可能な限り）。ChromeのWeb Inspectorを使用してリンクを検査しましたが、競合するルールは見つかりませんでした。

誰かがこの問題を抱えていましたか、または私がどこで間違っていたかを見ることができましたか？

解決済み- 問題は、回転を行うと要素の半分が Web ページのニュートラル (ゼロ) Z 軸の後ろに配置され、WebKit が明らかにその「ニュートラル」平面を通過するマウス イベントを許可しないことです。そのため、回転ポイントをパネルの右端/左端に変更すると解決しました。奇妙ですが、今のところ機能します。

4 つのパネルを持つ単純な HTML5/CSS3 ページがあります。これらのパネルは、-webkit-transform を使用して適切に配置されています。:hover では、-webkit-transform を使用してパネルを最前面に表示します。コードは以下です。

何が起こるかというと、:hover アクションが信頼できないということです。パネル上でマウスをスワイプすると、パネルの上にカーソルを置いたままマウスの移動を停止するのが一般的ですが、パネルは元の位置のままです。具体的には、左から右にスワイプすると、左端の 2 つのパネルは正常に動作しているように見えますが、右端の 2 つのパネルは、マウスがパネルの半分を横切るまで拡大されません。

これは何が原因でしょうか？

EDIT：簡単なフォローアップ、変換された要素に配置されたリンクは、要素の左端（2つの左パネルの場合）または右端（2つの右パネルの場合）の半分でのみクリック可能になるようです. つまり、クリック ゾーンは要素の「近い」半分に対してのみアクティブになります。

まず、HTML (最小限の例):

そしてCSS：

特定のCSSの変更をアニメーション化するためにWebKitトランジションを使用しています。
たとえば、誰かがホバリングしたときに緑色に変更したい赤いボックスがあるとします。私はこれを使用します：

それはうまくいきます。しかし、今、私はそれも少し下にスライドさせたいと言います。私はこれを使用します：

それも問題なく機能しますが、ボックスをすばやく下にスライドさせたい（たとえば50ミリ秒）。-duration色のアニメーションが速くなるので、変更できません。

CSSアニメーションのさまざまなプロパティにさまざまな期間を割り当てるにはどうすればよいですか？
必要に応じてキーフレームアニメーションを使用しても問題ありませんが、キーフレームアニメーションが役立つ方法は見当たりません。

参考のためのjsfiddle

これにより遷移時間が 1 秒に設定されるため、次のようになります。 $('#objectID').css('webkit-transition-duration','1s');

私はこれが現在のデュレーション値を返すと仮定しました: $('#objectID').css('webkit-transition-duration');

しかし、そうではありません。

Javascript を使用してオブジェクトにトランジションを配置します。

そして、遷移終了イベントをリッスンします。

イベントがトリガーされ、すべてが期待どおりに機能します。ただし、要素が で始まり、イベントleft:100pxにアニメーション化しようとするとleft:100px、イベントがトリガーされないため、問題が発生します。どうすればこれを修正できますか? 新しい値に対して値を実際にチェックすることはできません。

私はまだ HTML5 に慣れていませんが、非常に奇妙な動作に直面しました。(クローム)

次のコードはクロムで機能します。

ただし、行を移動すると:

moveIt関数の先頭まで、スパンは遷移せずにジャンプするだけです

JavaScript の部分は次のようになります。

では、ここでの違いは何ですか？ただし、これら 2 つのケースは Firefox でうまく機能します。IEは試していません。

私が得ることができるどんな助けにも感謝します！

私のコードはここにあります。3つの位置があります：zero(0,0)、、、。end(200,200)random(0,200)

divはrandom(0,200)最初の位置にあります。

したい ：

手順1）divを位置に設定しzero(0,0)ます。このステップはアニメーションなし

ステップ2）トランジションによって位置からzero位置に移動します。endこのステップにはアニメーションがあります

このようなコードはうまく機能しません：

className = 'pos_zero'css style（ ）がまだ完全に適用されていないのに、移行の開始が早すぎるようです。random位置から位置に直接移動しendます。そして、私が本当に望んでいるのは、からではなく、位置endから配置するアニメーションです。zerorandom

このようなコードは機能します：

このコードは、timeout関数を使用して正常に実行されます。このコードは、pos_zero最初にdivをその位置に設定し、次に関数によって非同期に遷移しtimeoutます。そして、そのtimeout機能はあまり専門的ではないようです。

だから、私はより専門的な解決策を探しています。

ところで。私は疑問に思う。「Style.flush（）」など、スタイルが完全に適用されていることを確認する方法はありますか？

@Inerdial動作します！ありがとうございます。更新を強制するには（即時の同期リフローまたはリレーアウトを強制するため）、JavaScriptは、変更の影響を受けるプロパティ（someSpanやotherSpanの場所など）を読み取る必要があります。`新しいコードはタイムアウトなしで機能します。

みんなありがとう。そして、私が混乱させてすみません。

私はフルスクリーンオーバーレイを持っています.現在jfiddleに設定しているので、http://jsfiddle.net/9NJP9/1/でフェードインするだけ です .フェードの代わりにやりたいことは、画面を一番下まで。滑り落ちます。ボタンをクリックすると、私のサイトは画面の高さよりも長くなりますが、サイト全体の上部からページの下部まで、画面の上部から画面の下部に表示され、誰かがスクロールしてもそこにとどまります。これを行うためにcssを操作する方法がわかりません。

これで私が得ることができるどんな助けも素晴らしいでしょう、ありがとう。

機能させようとしているイベントリスナーがあり、実行できないようです。Webkit 遷移を促す div のクラスを切り替える onclick セットアップがあります。その遷移が終了したら、jquery に外部ページを div にロードさせたいのですが、ロードしません。これは私が設定したjsです

ロードされていない理由はわかりませんが、これについて何か助けていただければ幸いです。

いくつかのスウッシー メニューを作成するために、<li>jQuery を使用して要素に CSS トランジション プロパティを設定しようとしています。HTML は次のようになります。

メニューの項目ごとに XXX が増加する の各"transform 0.3s ease-in-out XXXXs, padding-left 0.1s ease"要素に の遷移を適用しようとしています。.main-nav-child

ループを使用し.each()て各トップ レベル リスト項目を反復処理し、その内部で別のループを使用して内部リスト内の項目を反復処理しています。次に、JavaScriptでトランジションを設定しようとしています:

これを読んで、jQueryの.css方法を使ってみました：

また、DOM ではなく CSS スタイルのスタイル プロパティ名を使用してみました。

問題

ループは正常に機能しているようで、Chrome の Web インスペクターをいじった後、c.style.WebkitTransition何かを設定しようとすると機能するようですが、プロパティは保存されません。コンソールでも同じことを行います (こちらを参照してください: http://cl.ly/Lbau )

私は半日の大半でこれをいじっているので、誰かが私を助けることができれば、私は最も感謝しています!

乾杯。