Как выполнить код после анимации скрытой боковой панели?

Question

Давайте предположим, что у меня есть функция, как показано ниже.Я хочу выполнить this.sidebarVisible = false; после того, как все анимации, связанные с кодом, показанным выше в sidebarClode(), будут выполнены.Любые идеи, как я могу это сделать?

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()" >

Answer 1

Используя CSS для создания анимации, как вы, кажется, делаете, я не уверен, что вы можете заставить это работать точно, так как нет очевидного метода обратного вызова анимации с CSS.

Вы могли бы угадать этоиспользуя setTimeout, но это не будет точным.Вы также можете использовать опрос.Допустим, например, что вы знаете, что непрозрачность будет равна 0 для вашего элемента после завершения анимации, вы можете использовать setInterval следующим образом:

const interval = setInterval(() => {
  const el = document.getElementById('myElement')
  if (window.getComputedStyle(el).getPropertyValue("opacity") === 0) {
    clearInterval(interval)
    // execute your animate complete code here
  }
}, 100)

Этот интервал перестанет срабатывать, как только анимация завершится.

Однако, если вы хотите использовать jQuery, который имеет функцию обратного вызова полной анимации.Функция будет выполнена, когда анимация будет завершена.

Документы находятся здесь: http://api.jquery.com/animate/

Вот пример того, как может выглядеть код jQuery:

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