Is there a way for me to run code once the sidebar has finished its animation and is

Question

Is there a way for me to run code once the sidebar has finished its animation and is

If we consider a scenario where there is a function as illustrated below. The intention is to execute this.sidebarVisible = false; only after all the animations related to the code mentioned in sidebarClose() are completed. Any suggestions on how this can be achieved?

ts:

  sidebarOpen() {
    const toggleButton = this.toggleButton;
    const html = document.getElementsByTagName('html')[0];

    setTimeout(function () {
      toggleButton.classList.add('toggled');
    }, 500);
    html.classList.add('nav-open');

    this.sidebarVisible = true;

  };

  sidebarClose() {
    const html = document.getElementsByTagName('html')[0];
    this.toggleButton.classList.remove('toggled');
    html.classList.remove('nav-open');

    this.sidebarVisible = false; // I want to execute this line of code after all the animations associated with the code shown above in sidebarClode() will be done. I mean three lines of code above this comment.
  };

  sidebarToggle() {

    if (this.sidebarVisible === false) {
      this.sidebarOpen();
    } else {
      this.sidebarClose();
    }
  };

html:

  <button style="right: 1vw;" class="navbar-toggler navbar-burger" type="button" data-toggle="collapse" data-target="#navbarToggler"
          aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"
          (click)="sidebarToggle()" (transitionend)="this.printText()" >

html css angular typescript bootstrap-4

Answer 1

Answer №1

Utilizing CSS for animations, as you appear to be doing, may not provide the precise control you desire since CSS lacks an animation complete callback method.

You could try approximating it using setTimeout, but this method would not guarantee accuracy. Another approach is to implement polling. For instance, if you know that the opacity of your element will reach 0 when the animation finishes, you can use setInterval like so:

const interval = setInterval(() => {
  const el = document.getElementById('myElement')
  if (window.getComputedStyle(el).getPropertyValue("opacity") === 0) {
    clearInterval(interval)
    // Add your code for when the animation completes here
  }
}, 100)

This interval will stop running once the animation is completed.

Alternatively, if you are open to using jQuery, it does offer an animation complete callback function which executes upon animation completion.

Documentation for this feature can be found here: http://api.jquery.com/animate/

Below is an example showcasing how the jQuery code could be structured:

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    console.log('Animation complete.')
  });
});

Answer 2

Utilizing CSS for animations, as you appear to be doing, may not provide the precise control you desire since CSS lacks an animation complete callback method.

You could try approximating it using setTimeout, but this method would not guarantee accuracy. Another approach is to implement polling. For instance, if you know that the opacity of your element will reach 0 when the animation finishes, you can use setInterval like so:

const interval = setInterval(() => {
  const el = document.getElementById('myElement')
  if (window.getComputedStyle(el).getPropertyValue("opacity") === 0) {
    clearInterval(interval)
    // Add your code for when the animation completes here
  }
}, 100)

This interval will stop running once the animation is completed.

Alternatively, if you are open to using jQuery, it does offer an animation complete callback function which executes upon animation completion.

Documentation for this feature can be found here: http://api.jquery.com/animate/

Below is an example showcasing how the jQuery code could be structured:

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    console.log('Animation complete.')
  });
});

Is there a way for me to run code once the sidebar has finished its animation and is

Answer №1

Similar questions

Accessing data from a CD-ROM or DVD through a web browser

Ensuring the validity of a signed cookie in Node using Express

What is the process to convert it into an Array of Objects within Angular 2?

Ways to eliminate toggle event in Angular

I am interested in implementing a deep concept that involves multiple page effects using SCSS, but I do not want this effect to be applied to just one page within

Ways to conceal one message within another

How can I keep the size of a Bootstrap button consistent while wrapping text inside it?

What is the process of changing the name of an object's key in JavaScript/Angular?

Strange symbols were stored in the database after saving the textarea value

Eliminate the standard border line from a div element

What is the best way to retrieve a nested object array using a Signal in Angular/Typescript?

When using the navbar in Tailwind CSS, the image is appearing distorted instead of aligning properly with the adjacent

Received an error while using Mongoose 6 $group with Typescript stating that the property '_id' is not compatible with the index signature

Filtering with the Microsoft Graph Client

Transforming a JSON object into XML format

Is it possible to uncheck a checkbox from a list, even if some of them are already unchecked?

Which option offers superior performance: using attributes through HTML or jQuery?

What is the best way to enclose a block of content with <div> and </div> tags using the append() function?

Is it possible to incorporate HTML content into the metadata within the head section of a Nuxt application?

Guide to swapping images using HTML forms and JavaScript