Upgrade jQuery visibility and opacity animations to pure JavaScript for a more lightweight solution

Question

Upgrade jQuery visibility and opacity animations to pure JavaScript for a more lightweight solution

Currently I am in the process of removing jQuery from an older website. However, I have encountered a problem with an animation that is currently being used.

I have managed to replicate the opacity fade effect, but I am struggling to smoothly transition the visibility property. It seems to either go directly from 1 to 0 without any smooth transition. How can I achieve both effects smoothly?

$("#square").css({ opacity: 0.0, visibility: "visible" }).animate({ opacity: 1.0 }, 200);

$("#square").css({ opacity: 1.0, visibility: "hidden" }).animate({ opacity: 0.0 }, 200);

javascript jquery css

Answer 1

Answer №1

The best approach for smooth and efficient animations is to utilize CSS rather than JavaScript. Avoid using JS for animations whenever possible as it tends to be slower and lacks hardware acceleration.

To achieve the desired effects using CSS, make sure to understand and utilize the transition rule. This rule allows you to specify which properties should be animated, their timing, delays, and more. For detailed information, refer to the documentation on MDN.

Below is a basic example demonstrating how CSS can be used for animations. Note that JavaScript is simply responsible for adding a class to trigger the animation, while CSS controls the actual animation process.

let square = document.querySelector('#square');

document.querySelector('button').addEventListener('click', () => {
  square.classList.toggle('show');
});

#square {
  width: 200px;
  height: 200px;
  background-color: #C00;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}
#square.show {
  opacity: 1.0;
  visibility: visible;
}

<button>Toggle the square...</button>
<div id="square"></div>

Answer 2

The best approach for smooth and efficient animations is to utilize CSS rather than JavaScript. Avoid using JS for animations whenever possible as it tends to be slower and lacks hardware acceleration.

To achieve the desired effects using CSS, make sure to understand and utilize the transition rule. This rule allows you to specify which properties should be animated, their timing, delays, and more. For detailed information, refer to the documentation on MDN.

Below is a basic example demonstrating how CSS can be used for animations. Note that JavaScript is simply responsible for adding a class to trigger the animation, while CSS controls the actual animation process.

let square = document.querySelector('#square');

document.querySelector('button').addEventListener('click', () => {
  square.classList.toggle('show');
});

#square {
  width: 200px;
  height: 200px;
  background-color: #C00;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}
#square.show {
  opacity: 1.0;
  visibility: visible;
}

<button>Toggle the square...</button>
<div id="square"></div>

Upgrade jQuery visibility and opacity animations to pure JavaScript for a more lightweight solution

Answer №1

Similar questions

TextGeometry failing to render

Excessive Empty Area beneath <td>

Insert a div element into the JavaScript file

Creating a Bootstrap 4 DIV element with horizontal scrolling functionality

What is the best way to submit a form and display results without refreshing the page?

Is it possible to move a directive within a limited parent element?

I'm struggling to understand how to properly utilize the "path" parameter in the app.use() function. The outcome it produces is not what I had anticipated

What is the best way to update the key for the sorting field in a meteor collection query?

What sets Java classes apart from JavaScript classes?

Nesting ng-repeat within another ng-repeat for dynamic content generation

Error: Attempting to modify a constant value for property 'amount' within object '#<Object>'

What is the best way to link styleUrls to a CSS file located in a different directory?

Is there a substitute for bootstrap select in Rails?

Reinvent the AJAX functionality

Form alignment issue: Bootstrap justify-content feature not functioning as expected

Sending JSON array from PHP to jQuery AJAX

Create an array using modern ES6 imports syntax

Personalize Drop-Down Selection

Is it possible to process HTML and JavaScript as a request in JMeter?

What is the process for delivering a promise?