当 chrome 选项卡在后台时，transitionend 事件不会触发

Question

$("#element").addClass("myclass").on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function (e) {
  $("#element").addClass('text-success');
  $("#element2").addClass('myclass2');

  setTimeout(function () {
    $("#element").fadeOut("slow", function () {
      $("#element").remove();
    }); 
  }, 60000);
}); 

此工作正确，当标签处于活动状态时。 When the tab is inactive, the code will stop at the on event.

任何想法，如果选项卡也处于非活动状态，这将如何工作，当切换到选项卡时，看起来应该是这样？

Answer 1

Your code will only run when the tab is active due to the browser pausing the css animations when the tab is inactive. 我建议在JavaScript中进行动画，而不是CSS，这种方式应该在选项卡处于非活动状态时继续运行。

这取决于浏览器如何管理非活动选项卡。

Answer 2

好吧，我不知道如何在选项卡失焦时检测动画是否结束，但是如果您知道动画大约需要多长时间，您可以在安全的一段时间后手动触发事件，如果它还没有被解雇。 例如：

var hasRun = false;

$("#element").addClass("myclass").on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function () {
  runIt();
});

setTimeout(function () {
  runIt();
}, 10000); // Some period of time

function runIt() {
  if(!hasRun) {
    $("#element").addClass('text-success');
    $("#element2").addClass('myclass2');

    setTimeout(function () {
      $("#element").fadeOut("slow", function () {
        $("#element").remove();
      }); 
    }, 60000);

    hasRun = true;
  }
});