角度和javascript中的上滑动画答案

【问题标题】：slideup animation in angular and javascript角度和javascript中的上滑动画
【发布时间】：2019-08-17 17:30:08
【问题描述】：

我需要用 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>

【问题讨论】：

标签： javascript jquery angular jquery-ui

【解决方案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-y 方式。另外，它的代码要少得多。

【讨论】：