slideup animation in angular and javascript

Question

i need to create a menu in angular and javascript . i need this menu show and hide with button .

i write code and i show it here : Demo

i need to when click button , the start-item slideup with animation and when i click that button again start-item slidedown with animation .

how can i do this with 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>

Eliya Cohen · Accepted Answer · 2019-08-17 18:26:25Z

1

Why use jQuery if you can achieve this behavior via CSS? See Demo

The only changes I did was from these rules:

.start-Itms {
    ...
}

.visible {
    visibility: visible;
}

.hidden {
    visibility: hidden;
}

to these:

.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 - This way is more performant and smoother since I'm not changing the height (unlike jQuery) and as a result, the browser doesn't recalculate the layout.

PS 2 - Take a look at this Demo. I've changed the toggling logic. This is more Angular-y way to do things in Angular. Plus, it's much less code.

edited Aug 17, 2019 at 18:26

answered Aug 17, 2019 at 18:17

Eliya Cohen

11.6k14 gold badges79 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

slideup animation in angular and javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related