隐藏侧边栏动画后如何执行代码？答案

【问题标题】：How can I execute code after animation of hiding sidebar?隐藏侧边栏动画后如何执行代码？
【发布时间】：2019-02-25 04:57:27
【问题描述】：

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

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

【解决方案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.')
  });
});

【讨论】：