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-y 在 Angular 中做事的方式。另外，它的代码要少得多。

angular 和 javascript 中的滑动动画

slideup animation in angular and javascript

javascript

jquery

jquery-ui

angular