元素在过渡时重叠的 setInterval 函数，

Question

我要优化。 Blue/green 使用 setInterval 检查是否重叠，如果它们有蓝色，则发送到绿色下方，直到它们不再相交。然而，很多时候它们并没有相交，而是可能彼此远离或靠近但没有完全重叠。当 green/blue 将要重叠时而不是当它们不重叠时检查重叠的方法有哪些，还有其他更简单的方法吗？此外，我对这种方法的使用并没有像这个例子那样使用同样反向相关的变量，因此像 (if rand>50%) 这样的解决方案将无济于事。谢谢！

var green = document.getElementById('green');
var blue = document.getElementById('blue');
        
function myFunct1() {
    var array = ['10%','20%','30%','40%','50%','60%','70%','80%']  
    var rand = array[Math.floor(Math.random()*array.length)];
    green.style.left = rand;
    blue.style.right = rand;
    var inter = setInterval(overlay, 50);
    setTimeout(function( ) { clearInterval( inter ); }, 1500);
}

function overlay() {
    var greenRect = green.getBoundingClientRect();
    var blueRect = blue.getBoundingClientRect();
    var overlap = !(greenRect.right < blueRect.left || greenRect.left > blueRect.right)
            
    if (overlap == true) {
        blue.style.top = '20px';  
    }
    else {
        blue.style.top = 'auto';
    }
}

#container {
   position: relative;
   width: 90%;
   height: 40px;
   margin: auto;
   border: 1px solid black;
 }

#green {
  position: absolute;
  width: 50px;
  height: 20px;
  left: 10px;
  background-color: green;
  transition: 1500ms;
 }
        
#blue {
  position: absolute;
  width: 50px;
  height:20px;
  right: 10px;
  background-color: blue;
  transition: 1500ms;
}

<div id = 'container'>
    <div id = 'green'></div>
    <div id = 'blue'></div>
</div>
        
<button onclick = 'myFunct1()'>FUNCTION 1</button>

Answer 1

添加一些重叠公差如何，

我只添加了两个框之一，当然，您可以拆分重叠并将它们应用于两个框

function overlay() {
    var overlappingTolerance = 10
    var greenRect = green.getBoundingClientRect();
    var blueRect = blue.getBoundingClientRect();
    var overlap = !(
                       ( greenRect.right - overlappingTolerance)  < blueRect.left ||
                       ( greenRect.left - overlappingTolerance) > blueRect.right
                   );

    if (overlap == true) {
        blue.style.top = '20px';  
    }
    else {
        blue.style.top = 'auto';
    }
}

元素在过渡时重叠的 setInterval 函数，

setInterval function for elements overlapping while transitioning,

javascript

methods

function

overlap

setinterval