toggle 属性が使用されている場合、CSS トランジションを維持できますか?

Question

<p>左から右に移動する div があります。常に画面上に表示され、ウィンドウのサイズが変更されたときに位置合わせされないようにするには、画面のどちら側が近いかに応じて、左右の使用を切り替えます。
スムーズに動作しますが、方向が左から右、またはその逆に切り替わるとすぐに遷移はなく、div はただちに移動します。 <br /><br />左と右の使用を切り替えている場合でも、所有している CSS トランジション (または所有していない同様の CSS トランジション) を維持するにはどうすればよいですか?<br /><br / >JavaScript にはこの関数があります:</p><p><br /></p> <pre class="brush:php;toolbar:false;">function moveTimeline(screenIndex) { // ウィンドウのサイズ変更により変動する可能性があります let timelineSectionWidth = (TIMELINE_BACKGROUND_WIDTH - documentElement.clientWidth) / num_timelinePieces; // div がどちら側にアタッチされるかを確認します let isOnLeftSide = (screenIndex < num_timelinePieces / 2); // インデックスが右側にある場合は反転します if (!isOnLeftSide) screenIndex = screenIndex - num_timelinePieces; // 新しいピクセル位置を計算します let new_timelinePosition = Math.floor(screenIndex * timelineSectionWidth); // 干渉しないように、未使用のプロパティの設定を解除します。 if (isOnLeftSide) { timelineBackground.css({ "left": "-" new_timelinePosition "px", "右": "自動" }); } それ以外 { timelineBackground.css({ "左": "自動"、 "right": (new_timelinePosition) "px" }); } }</pre> <p>CSS 属性は次のとおりです:</p> <pre class="brush:php;toolbar:false;">トランジション: 左 1 秒イーズ、右 1 秒イーズ;</pre> <p>自動操縦のプロパティを切り替えた場合でも、div が左から右にスムーズに移動し続けるようにしたいのですが、それで仕事が終わるわけではありません。ここからどうやって行くのかわかりません。ウィンドウのサイズが変更された場合に div の位置が台無しになるため、単一のプロパティは使用しないでください。手動で div を段階的に移動するのは絶対的な最後の手段です。 </p>

Answer 1

右から左に切り替えるとトランジションがすぐに反対側に移ってしまうように見える理由は、左と右を自動値に設定しているためです。 CSS トランジション (または一般的な CSS アニメーション) は、auto 値を持つプロパティでは機能しません。

これはドキュメント「CSS トランジションの使用」からの抜粋です:

おそらく、左/右 CSS プロパティの代わりに、translateX() 関数で CSS プロパティを変換したほうがよいでしょうか? そうすることで、パフォーマンスを変換して改善するための単一の信頼できる CSS 値。

コードは次のようになります:

リーリー

CSS トランジションは次のようになります:

リーリー

H は役立つはずです