Disabling CSS transitions and attempting to alter the style of an HTML element using JavaScript may not consistently work as expected

Question

Disabling CSS transitions and attempting to alter the style of an HTML element using JavaScript may not consistently work as expected

Currently, I am in the process of creating an animated effect for a website that involves moving two elements' positions over time and resetting them to their original position. Only one element is displayed at a time, and the animation should run smoothly.

Unfortunately, a CSS-only solution is not feasible because the animation needs to be dynamically generated and synchronized. For the purpose of this question, I'll focus on a simplified example where a box moves to the right. The following discussion will revolve around this specific scenario unless stated otherwise.

The movement is controlled by utilizing the CSS transition property to handle the animation. To reset the element's position instantly, the transition must be removed before reapplying it when needed to start moving again immediately. However, this method doesn't seem to work as expected, which brings us to the issue at hand.

If you examine the Javascript code provided at the end of this question or on the linked JSFiddle, you'll notice that I'm attempting to remove the delay between transitions by using setTimeout. Unfortunately, this implementation introduces a 25ms delay, causing the element to intermittently remain stationary without the desired effect. Increasing the delay somewhat resolves the issue but creates a minor jitter in the animation due to its two-part nature and lack of designed delays.

While this behavior might appear to be a browser bug, testing across Chrome, Firefox 52, and the most recent version of Firefox yielded similar results. I have yet to come across any reported instances of this problem or potential solutions/workarounds. Any assistance in resolving this matter and achieving the intended functionality would be greatly appreciated. :)

Here is a link to the JSFiddle page showcasing the issue.

The relevant markup and code are also provided below:

var box = document.getElementById("box");
//Adjust this value or set it to 0 (eliminating the timeout)
//for optimal intermittent performance.
var delay = 25;

setInterval(function() {
  box.style.transition = "none";
  box.style.left = "1em";

  setTimeout(function() {
    box.style.transition = "1s linear";
    box.style.left = "11em";
  }, delay);
}, 1000);

#box {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;
}

<div id="box"></div>

javascript html css css-transitions

Answer 1

Answer №1

To ensure the DOM recalculates itself before applying a new transition after resetting, you can trigger this process by reading the offset of an element. Here is an example using JavaScript:

var box = document.getElementById("box");

setInterval(function(){
      box.style.transition = "none";
      box.style.left = "1em";
      let x = box.offsetLeft; // Reading a positioning value forces DOM to recalculate all positions after changes
      box.style.transition = "1s linear";
      box.style.left = "11em";  
    }, 1000);

body {
  background-color: rgba(0,0,0,0);
}

#box {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;
}

<div id="box"></div>

For a working demo, visit jsFiddle.

By default, the DOM doesn't update immediately when properties are set; it waits until the script finishes execution. However, if you read a property after changing it, the DOM will recalculate instantly.

Without the timeout and property reading, the style.left value would first change to 1em, then abruptly switch to 11em. The transition occurs after the script finishes executing, affecting the last assigned value (11em). But by reading a position value in between changes, the transition reflects the most recent value accurately.

Answer 2

To ensure the DOM recalculates itself before applying a new transition after resetting, you can trigger this process by reading the offset of an element. Here is an example using JavaScript:

var box = document.getElementById("box");

setInterval(function(){
      box.style.transition = "none";
      box.style.left = "1em";
      let x = box.offsetLeft; // Reading a positioning value forces DOM to recalculate all positions after changes
      box.style.transition = "1s linear";
      box.style.left = "11em";  
    }, 1000);

body {
  background-color: rgba(0,0,0,0);
}

#box {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;
}

<div id="box"></div>

For a working demo, visit jsFiddle.

By default, the DOM doesn't update immediately when properties are set; it waits until the script finishes execution. However, if you read a property after changing it, the DOM will recalculate instantly.

Without the timeout and property reading, the style.left value would first change to 1em, then abruptly switch to 11em. The transition occurs after the script finishes executing, affecting the last assigned value (11em). But by reading a position value in between changes, the transition reflects the most recent value accurately.

Answer 3

Answer №2

Instead of utilizing the transition for animation effects, consider using animation instead. It offers better performance and eliminates the need for a timer to monitor it.

By leveraging animation events, one can coordinate the animation as needed, such as triggering a timer to reset or modify it.

This can be achieved by setting up some components with CSS:

var box = document.getElementById("box");
box.style.left = "11em"; // initial position

box.addEventListener("animationend", animation_ended, false);

function animation_ended (e) {
  if (e.type == 'animationend') {
    this.style.left = "1em";
  }
}

#box {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;
  animation: move_me 1s linear 4;
}
@keyframes move_me {
  0% { left: 1em; }
}

<div id="box"></div>

Or go for a completely script-based approach:

var prop = 'left', value1 = '1em', value2 = '11em'; 

var s = document.createElement('style');
s.type = 'text/css';
s.innerHTML = '@keyframes move_me {0% { ' + prop + ':' + value1 +' }}';
document.getElementsByTagName('head')[0].appendChild(s);

var box = document.getElementById("box");
box.style.animation = 'move_me 1s linear 4';
box.style.left = value2; // initial position

box.addEventListener("animationend", animation_ended, false);

function animation_ended (e) {
  if (e.type == 'animationend') {
    this.style.left = value1;
  }
}

#box {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;
}

<div id="box"></div>

Answer 4

Instead of utilizing the transition for animation effects, consider using animation instead. It offers better performance and eliminates the need for a timer to monitor it.

By leveraging animation events, one can coordinate the animation as needed, such as triggering a timer to reset or modify it.

This can be achieved by setting up some components with CSS:

var box = document.getElementById("box");
box.style.left = "11em"; // initial position

box.addEventListener("animationend", animation_ended, false);

function animation_ended (e) {
  if (e.type == 'animationend') {
    this.style.left = "1em";
  }
}

#box {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;
  animation: move_me 1s linear 4;
}
@keyframes move_me {
  0% { left: 1em; }
}

<div id="box"></div>

Or go for a completely script-based approach:

var prop = 'left', value1 = '1em', value2 = '11em'; 

var s = document.createElement('style');
s.type = 'text/css';
s.innerHTML = '@keyframes move_me {0% { ' + prop + ':' + value1 +' }}';
document.getElementsByTagName('head')[0].appendChild(s);

var box = document.getElementById("box");
box.style.animation = 'move_me 1s linear 4';
box.style.left = value2; // initial position

box.addEventListener("animationend", animation_ended, false);

function animation_ended (e) {
  if (e.type == 'animationend') {
    this.style.left = value1;
  }
}

#box {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;
}

<div id="box"></div>

Disabling CSS transitions and attempting to alter the style of an HTML element using JavaScript may not consistently work as expected

Answer №1

Answer №2

Similar questions

Navigate the user to various pages in a Node.js application based on login status

What could be causing the search function of the datatable to be hidden?

What is the preferred workflow for client-side modules: (Browserify + npm + gulp) or (RequireJS + Bower + gulp)?

How can I use a JavaScript function to remove an element from a PHP array?

Guide to displaying a custom HTML tag

My image is being cropped on larger screens due to the background-size: cover property

Positioning social media icons directly below the Avatar component

Creating vibrant squares using HTML and CSS

Run the function after the onclick function has finished executing

Loading files using $scriptjs or any other asynchronous loader allows for seamless integration of external resources

Exploring the concept of passing 'this' as a parameter in JavaScript

executing functions that return a JSX component within the render method

What is the best way to combine two responses and then convert them into a promise?

Tips for How to Put a Delay on Ajax Requests and Display a Progress Bar During Loading

Transferring information submitted in a form to a service using AngularJS

React is unable to identify the property that was passed to a styled-component in Material UI

Encountered a MySQL error while attempting to insert an image into the database

Closing the Bootstrap Dropdown Menu

The slider thumb is not showing up properly on Microsoft Edge

Change object values to capital letters