CODEWITHSUNDEEP
javascriptjqueryangularjquery-ui
kianoush dortaj
kianoush dortaj

Reputation: 19

slideup animation in angular and javascript

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>

Upvotes: 0

Views: 55

Answers (1)

Eliya Cohen
Eliya Cohen

Reputation: 11508

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.

Upvotes: 1

Related Questions