toggle 属性が使用されている場合、CSS トランジションを維持できますか?
<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>
