javascript - Angular 和 JavaScript 中的幻灯片动画

Question

我需要用 Angular 和 JavaScript 创建一个菜单。我需要使用按钮显示和隐藏此菜单。

我编写代码并在此处显示:Demo

我需要在单击按钮时，start-item 向上滑动并带有动画，当我再次单击该按钮时，start-item 向下滑动并带有动画。

我怎样才能用 jquery 做到这一点？？？

showHideMenu(is: boolean) {
var elem = document.querySelector('.start-Itms');
if (this.isOpen) {
  console.log(this.isOpen)
  elem.classList.remove('hidden');
  elem.classList.add('visible');
  this.isOpen = false;
} else {
  console.log(this.isOpen)
  elem.classList.remove('visible');
  elem.classList.add('hidden');
  this.isOpen = true;
}

}

HTML:

<div class="container-fluid p-0 content">
<div class="startMenu p-0 col-md-12 col-sm-12 col-lg-12 col-xl-12">
    <div class="start p-0" (click)="showHideMenu(isOpen)">
        <img src="../../../assets/img/Icon/windows-10-solo-logo.png">
    </div>
    <div class="col-md-32 col-sm-32 col-lg-32 col-xl-32">
        <input>
    </div>
</div>
<div class="start-Itms" id="start-Itms">

</div>

Answer 1

如果可以通过 CSS 实现此行为，为什么还要使用 jQuery？ See Demo

我所做的唯一更改是这些规则:

.start-Itms {
    ...
}

.visible {
    visibility: visible;
}

.hidden {
    visibility: hidden;
}

致这些:

.start-Itms {
    ...
    transition: all 300ms ease 0s;
}

.visible {
    pointer-events: auto;
    transform: translateY(0);
    opacity: 1;
}

.hidden {
    pointer-events: none;
    transform: translateY(100%);
    opacity: 0;
}

PS - 这种方式性能更高、更流畅，因为我没有更改高度(与 jQuery 不同)，因此浏览器不会重新计算布局。

PS 2 - 看看这个 Demo 。我改变了切换逻辑。这是在 Angular 中做事情的更 Angular 方式。另外，代码也少得多。