Как сделать, чтобы 2 элемента столкнулись?

Question

Имеется 2 элемента с классом box, которые с постоянной скоростью движутся друг к другу:

https://jsfiddle.net/wnf0repg/

Нужно сделать так, чтобы они столкнулись при касании друг к другу. Как это правильно реализовать и как лучше сделать?

Марина · Accepted Answer

Если это вот прям конечный вариант и нужно только остановить их без дополнительных анимаций и последующих действий: Я бы тупо вручную подобрал кол-во итераций, после которого нужно вызвать clearInterval

var i = 0;
var interval = setInterval(function() {
 // ляляля
 if( ++i > 51 ) clearInterval(interval);
}, 20);

P.s. зачем вызывать функцию 250 раз в секунду, если браузер всё равно обновляет картинку 60 раз в секунду?
__________________

А если нужно реализовать нормальную анимацию, сделал бы так:

var i = 0; // тормоз для тестов;

$('.box').clone().appendTo('.scene');
var $th = $('.box');
var box1 = $th.get(0);
var box2 = $th.get(1);
$(box1).css({
 left: box1.offsetLeft + (-1000) + 'px'
});
$(box2).css({
 left: box2.offsetLeft + (1000) + 'px',
 transform: 'rotateX(-100deg) rotateY(270deg)'
});

var card1 = box1.querySelector(".cuboid-17 .face.rt");
var card2 = box2.querySelector(".cuboid-17 .face.rt");

requestAnimationFrame(move);
function move() {
 $(box1).css('left', box1.offsetLeft + (10) + 'px');
 $(box2).css('left', box2.offsetLeft + (-10) + 'px');

console.log(card1.getBoundingClientRect().right, card2.getBoundingClientRect().left);

if (i++ > 100 || card2.getBoundingClientRect().left - card1.getBoundingClientRect().right < 1) {
 // Вызвать анимацию столкновения ();
 return;
 }
 requestAnimationFrame(move);
}
__________

Оказалось легче взять крайние элементы и тупо сравнивать их координаты, чем вникать в миллион трансформаций и доставать оттуда реальную ширину анимируемого объекта.

Проверка не на равенство, потому что там длинные дроби, они никогда не будут равны. Нужно только, чтобы были достаточно близки.