如何防止使用CSS关键帧动画的div发生碰撞

Question

如何防止一个div ，其top位置与动画关键帧CSS从相互冲突div也被动画与JavaScript中的相同的关键帧？ 我想“暂停”关键帧，稍等一会儿(1s?) ，然后重新启动它。
我已经编写了代码来检测碰撞，但是如何暂停关键帧（跨浏览器）？ 然后，我怎么能再次启动它？

关键帧：

@keyframes moveItUp {
    10% {
        top: 18%;
    }
    20% {
        top: 16%;
    }
    30% {
        top: 14%;
    }
    40% {
        top: 12%;
    }
    50% {
        top: 10%;
    }
    60% {
        top: 8%;
    }
    70% {
        top: 6%;
    }
    80% {
        top: 4%;
    }
    90% {
        top: 2%;
    }
    100% {
        top: -20px;
    }
}

检查两个div的冲突：

jQuery.fn.collision = function($div2) {
    $div1  = $(this);
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var h1 = $div1.outerHeight(true);
    var w1 = $div1.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
    return true;
};

以下是关键帧的碰撞代码演示： http ： //codepen.io/anon/pen/YqVVqV

Answer 1

关键是在检测到碰撞时将animation-play-state为paused ，然后在所需的时间（使用setTimeout ）之后将其重新设置为running 。

需要注意的另一件事是，碰撞检查必须在两个元素都添加了动画之后进行，因为否则将没有动画设置播放状态。 或者，我们还可以检查在检测到碰撞时元素上是否存在动画，并在animation-play-state中将animation-play-state为paused 。

 jQuery.fn.collision = function($div2) { $div1 = $(this); var x1 = $div1.offset().left; var y1 = $div1.offset().top; var h1 = $div1.outerHeight(true); var w1 = $div1.outerWidth(true); var b1 = y1 + h1; var r1 = x1 + w1; var x2 = $div2.offset().left; var y2 = $div2.offset().top; var h2 = $div2.outerHeight(true); var w2 = $div2.outerWidth(true); var b2 = y2 + h2; var r2 = x2 + w2; if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; return true; }; function tryCollision() { $('.test123').css('animation', 'moveItUp 10s'); setTimeout(function() { $('.test321').css('animation', 'moveItUp 10s'); var int = setInterval(function() { var res = $('.test321').collision($('.test123')); if (res == true) { $('body').append('<p>KEYFRAME for .test321 needs to be stopped and then continue after 1s</p>'); /* set the animation's state to paused */ $('.test321').css('animation-play-state', 'paused'); /* after the required amount of time set it back to running */ setTimeout(function() { $('.test321').css('animation-play-state', 'running') }, 2500); clearInterval(int); } }, 1); }, 500); } 

 @keyframes moveItUp { 10% { top: 18%; } 20% { top: 16%; } 30% { top: 14%; } 40% { top: 12%; } 50% { top: 10%; } 60% { top: 8%; } 70% { top: 6%; } 80% { top: 4%; } 90% { top: 2%; } 100% { top: -20px; } } .test123, .test321 { position: absolute; top: 20%; width: 90%; left: 10px; } .test123 { background: #000; } .test321 { background: yellow; } button { position: absolute; top: 25%; } p { position: absolute; top: 30%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test123">a</div> <div class="test321">a</div> <button onclick="tryCollision()">Try the collision</button>