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

This working correctly, when the tab is active. When the tab is inactive, the code will stop at the on event.

Any idea, how this will work if the tab is also inactive, when switching to the tab, thats looking like it should?

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. I would recommend doing your animations in javascript, not css, that way it should continue to run when the tab is inactive.

It depends on how the browser manages inactive tabs.

Answer 2

Well, I don't know how to detect if the animation had ended while the tab is out of focus, but if you know approximately how long the animation should take, you can always trigger the event manually after some safe period of time if it hasn't been fired already. Eg:

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