問題タブ [translate3d]
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.
css - translate3d により、上/左での配置よりもスタイルの再計算フェーズが長くなりますか?
私はブラウザのレンダリングについて深く掘り下げようとしており、講演の準備としてこの小さなデモを思いつきました。
スケジューリングをからrequestAnimationFrameに簡単に切り替えることができるアニメーション デモをまとめました。setIntervaltop/lefttop/lefttranslate3d(0,0,0)translate3d(x,y,z)
translate3dsは特効薬ではないことがわかりました。特に、あまりにも多くの要素に適用するとコストがかかる可能性があることがわかりました。ただし、私の注意を引いた特定のことが 1 つあります。positionerからDefaultPositionerに切り替えると、Translate3dPositioner以前よりもスタイルの再計算フェーズが長くなるようです。私はそれについての情報を見つけることができなかったので、誰かがここで何が起こっているかについてもっと情報を共有できるかどうか疑問に思っています.
デモへのリンクは次のとおりです: http://plnkr.co/edit/TKwKBk?p=preview
app.jsファイル内で実装を切り替えるだけです。
もう 1 つ: 再開をクリックしてデモを開始するときは、すべてのボックスが少し離れるまで少し待つ必要があります。私はそれが貧弱なデモであることを知っています;-)
scroll - jQuery ウェイポイントと translate3d
Onepage scroll とjQuery Waypointsの 2 つのスクリプトをリンクしようとしています。問題は、Onepage scroll が translate3d を使用してページをスクロールすることであり、このため jQuery ウェイポイントが失敗することです。どのように機能させるのですか？
jquery - 水平移動 3D アニメーションがアニメーションしない
私が達成しようとしているのは、コンテナーのサイズを 2 倍にし、スライドとして機能する 2 つの div をホストする div を含むボックスです。ボタンは単にラッパーの左側をアニメーション化し、スライド効果を作成します。これはhtmlです：
すべてが機能しますが、アニメーション効果は Firefox でのみ表示されます。Webkit も chrome も ipad もありません。Firefox だけです。私は何時間も頭を叩いていましたが、何が間違っていたのだろうと思っていました.
ここで実際の例を見ることができます（説明するよりも見る方が簡単です）： http://jsfiddle.net/omegaiori/Qys8W/
jsに何か問題があると思われます。どう思いますか？
どうもありがとう！
css - 遷移中の固定背景のちらつき
移行中の固定背景に問題があります。私は2つのパネルを持っています.panel-1には2つの画像があり、それぞれ左から右と右から左にアニメーション化されます.基本的には、トランジションをトリガーするために「アニメーション」クラスを追加するだけです. 移行中、panel-2 (背景が固定され、テキスト コンテンツがいくつかある) がクロムでちらつきます。ライブでチェックしてくださいhttp://jsfiddle.net/7EqaV/embedded/result/
何かアドバイス？前もって感謝します！..
HTML コード:
CSS コード:
JS コード:
css - webkit のレンダリングが translate3d の方法を誤解していた (バグあり)
最初に言いたいのは、私はこの「問題」の解決策を探しているのではなく、それがどのように機能するかを理解したいだけです（または、正しく言えば機能しません）。
たとえば、次のブロックがあります。
クリックイベントを処理するためのランダムな別のブロックを #block のトグルクラス関数でサイズ変更し、画面上のスクロールバーを取得するためにサイズを変更します
繰り返しになりますが-はい、座標系のため、translate3dで固定位置を使用できないことはわかっています(実際には、その仕組みを完全には理解していません.. :( )、クロム/ウェブキットの仕様とバグレポートを読みましたが、理由を理解したいだけです。つまり、ブラウザがそれをどのように見て、なぜレンダリングが非常に奇妙であるかを意味します...
ここでいくつかの観察：
翻訳位置を変更します (完全に非表示 -> -500px):
翻訳位置の変更 (表示 -> +50px):
表示なし/ブロックの変更:
'position:absolute' を使用して translate(position) を変更すると、すべての場合で正常に動作します。
Chrome 33.0.1726.0 でのみテストしているため、別のブラウザでは動作が異なると思われます
css - translate3d でホバーする画像リンクを取得できません
5 つの画像を含むヘッダーがあります。ホバーしたときに画像が10px上に遷移するようにしたいのですが、なぜか瞬時に上に移動するだけでスムーズに上がらないのです。Google Chrome を使用しています。
サイトhttp://pannariz.comを参照できます。それはそれがどのように見えるかです