Question

如何阻止其div位置使用CSS关键帧制作动画的top与另一个div发生碰撞，而另一个(1s?)也在Javascript中使用相同的关键帧进行动画处理？我想＆＃34;暂停＆＃34;关键帧，稍等一下@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; } }，然后重新启动它我已经制作了一个代码来检测碰撞，但是如何暂停关键帧（跨浏览器）？然后，我该如何重新开始呢？

关键帧：

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;
};

检查两个div的碰撞：

{{1}}

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

Answer 1

关键是在检测到碰撞时将<?xml version="1.0"?> <ECReports xmlns="urn:epcglobal:ale:xsd:1" schemaVersion="1.1" creationDate="2008-02-19T10:54:06.444-05:00" specName="ECSpec1" date="2008-02-19T10:54:06.444-05:00" ALEID="ALEID_1" totalMilliseconds="5000" terminationCondition="DURATION"> <reports> <report reportName="ReportName1"> <group> <groupList> <member> <tag> urn:epc:tag:sgtin-96:3.0037000.006542.773346595 </tag> </member> </groupList> <groupCount> <count>1</count> </groupCount> </group> </report> <report reportName="ReportName2" /> </reports> </ECReports>设置为animation-play-state，然后在所需的时间后将其重新设置为paused（使用{{1} }）。

需要注意的另一件事是碰撞检查必须在两个元素都添加动画之后发生，因为否则将没有动画来设置播放状态。或者，我们还可以检查在检测到碰撞时元素上是否存在动画，如果有动画，则将running设置为setTimeout。

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);
}

如何防止使用CSS关键帧动画的div动画

1 个答案: