html - 如何在隐藏侧边栏动画后执行代码？

Question

假设我有一个如下所示的函数。我想执行 this.sidebarVisible = false; 在与 sidebarClode() 中显示的代码关联的所有动画完成后。我该怎么做？有什么想法吗？

:

  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.')
  });
});