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

当标签处于活动状态时，此操作正常。当选项卡处于非活动状态时，代码将在on事件处停止。

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

Answer 1

您的代码仅在选项卡处于活动状态时运行，因为当选项卡处于非活动状态时，浏览器会暂停css动画。我建议您使用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;
  }
});

当chrome标签位于后台

2 个答案: