Transitionend event fails to trigger when Chrome tab is not in focus

Question

Transitionend event fails to trigger when Chrome tab is not in focus

$("#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 code functions correctly when the tab is active. However, if the tab becomes inactive, the code will pause at the 'on' event.

Does anyone have any suggestions on how to make this code work even if the tab is inactive, so that when switching back to the tab everything appears as it should?

javascript jquery css

Answer 1

Answer №1

To ensure your code runs smoothly even when the tab is inactive, consider using javascript for animations instead of css. This will help maintain continuous animation playback regardless of tab activity.

The behavior of inactive tabs varies depending on the browser being used.

Answer 2

To ensure your code runs smoothly even when the tab is inactive, consider using javascript for animations instead of css. This will help maintain continuous animation playback regardless of tab activity.

The behavior of inactive tabs varies depending on the browser being used.

Answer 3

Answer №2

Although I'm unsure about how to determine if the animation has finished when the tab is not in focus, you can manually trigger the event after a certain delay if you have an estimate of how long the animation should last. For example:

var executed = false;

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

setTimeout(function () {
  execute();
}, 10000); // Delay for triggering

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

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

    executed = true;
  }
});

Answer 4

Although I'm unsure about how to determine if the animation has finished when the tab is not in focus, you can manually trigger the event after a certain delay if you have an estimate of how long the animation should last. For example:

var executed = false;

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

setTimeout(function () {
  execute();
}, 10000); // Delay for triggering

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

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

    executed = true;
  }
});

Transitionend event fails to trigger when Chrome tab is not in focus

Answer №1

Answer №2

Similar questions

Overloading CometD with multiple publishes in a single call using Java and jQuery

Pass Form ID To Function In A Dynamic Way

Troubleshooting: Unable to fetch CSS file in Node.js Express framework

Encountering an issue with Next.js React SSR using styled-jsx: unable to access the 'state' property as

Issues with the Lengthmenu option in Bootstrap Datatables Javascript

express/node: You are unable to define headers once they have already been sent to the client

The checkValidity function fails to identify incorrect "tel" input

Is there a way to remove the row after hitting its corresponding button?

NestJS Logger: Issue setting logger types in main.ts

The Slider within the Modal only becomes visible after I adjust the screen size

Having issues with the onchange attribute in the rails text_field_tag not functioning as

"Observed Issue: Ionic2 Array Fails to Update in HTML Display

Obtaining information from an AngularJS Service Response and assigning it to the Controller Scope Object

Target the CSS element with a specific class only if it is not the first child within its parent

How can you modify the HTML tags before Bootstrap overrides them?

Creating an HTML return statement to specifically target and extract a certain string while disregarding additional data

I aim to utilize JavaScript to capture the constantly changing font color that is randomly generated

streaming audio data from a MongoDB database to an HTML audio element

Update the div using jq_form_remote_tag

Inconsistency in div height caused by positioning disparities