將容器內的 div 從邊緣移動到邊緣

Question

我試圖讓一個 div （形狀像條形）在容器內移動（無限循環，來回）。

您可以在此處找到代碼筆： https://codepen.io/riza-khan/pen/wvzLRPW?editors=0010

我似乎無法找到正確的方法來做到這一點。

我使用getBoundingClientRect()來獲取父元素的 position 與其父元素的左值和右值相關聯，但這似乎不起作用。 它在茫茫荒野中來回擺動。

基本上預期的結果是條從其容器元素的一個邊緣移動到另一邊緣（但從不離開容器）。

謝謝，

Answer 1

這可以很容易地通過純 CSS 使用@keyframes規則和父bar上的 animation 來實現。 CSS Animation 看起來會更平滑恕我直言......

但是如果你想使用 JS...

您可以使用添加/刪除類的 function 創建一個setInterval ，然后使用條件檢查是否設置了 class。 如果已設置，則來回遞增/遞減嵌套元素的寬度值。

我使用element.clientWidth()來獲取嵌套元素的寬度和父元素的寬度，然后用父元素的寬度減去嵌套元素的寬度以獲得來回的約束。

創建一個 function，有一個條件，一個遞增，另一個遞減起始值0 。 使用條件檢查 class: left or right ... 如果是left ，小於約束寬度，它會運行增加寬度值的間隔。 然后是一個附加條件，檢查它是否等於父元素的寬度和嵌套元素的寬度，如果是，則刪除left class 並添加right 。 然后另一個條件檢查right是否設置為 class 並且它基本上將start反轉為遞減回0 。

 let parent = document.getElementById('bar'); let inner = document.querySelector('#bar span'); let width = parent.clientWidth - inner.clientWidth; let start = 0; const moveIt = setInterval(move, 2); function move() { if (inner.classList.contains('right')) { inner.style.left = `${start--}px`; if (start === 0) { inner.classList.remove('right'); inner.className = 'left'; } } else { inner.style.left = `${start++}px`; if (start === width) { inner.className = 'right'; inner.classList.remove('left'); } } }

 #bar { width: 80vw; background-color: rgba(255, 0, 0, 0.5); height: 2rem; border: 2px solid black; position: relative; display: flex; align-items: center; } #bar span { position: absolute; height: 90%; width: 42px; background-color: red; border-radius: 50%; border: 1px solid black; box-shadow: inset 2px 0 12px #800000, 0 0 3px #3d3d3d; }

 <div id="bar"> <span class="left"></span> </div>

Answer 2

為什么不只使用 CSS 動畫而不用擔心 Javascript：

 .bar{ border:solid 2px #333; height: 40px; position: absolute; width: 90%; }.bar::before{ content: ''; display: block; border-radius: 50%; background: orangered; height: 100%; width: 40px; animation: slide 4s infinite linear; position: relative; } @keyframes slide { 0% {left: 0} 50% {left: calc(100% - 40px)} 100% {left: 0} }

 <div class='bar'></div>