Angular 4 5 6 7 - Simple example of slide in out animation on ngIf

Question

What is the bare minimum and Angular4 s native way to slide in and slide out a container element   e g    lt div ngIf  show  gt       lt  -- Content -- gt   lt  div gt    Slide In Content  from top to down just like jQuery slideDown    when show turns to true   Slide Out Content  suitably with ease-out effect  when show turns to false

User · Answer

Actually the minimum amount of Angular to be used (as requested in the original question) is just adding a class to the DOM element when show variable is true, and perform the animation/transition via CSS.

So your minimum Angular code is this:

<div class="box-opener" (click)="show = !show">
    Open/close the box
</div>

<div class="box" [class.opened]="show">
    <!-- Content -->
</div>

With this solution, you need to create CSS rules for the transition, something like this:

.box {
    background-color: #FFCC55;
    max-height: 0px;
    overflow-y: hidden;
    transition: ease-in-out 400ms max-height;
}

.box.opened {
    max-height: 500px;
    transition: ease-in-out 600ms max-height;
}

If you have retro-browser-compatibility issues, just remember to add the vendor prefixes in the transitions.

See the example here

User · Answer

The most upvoted answer is not implementing a real slide in out  or down up   as   It s not doing a soft transition on the height attribute  At time zero the element already has the 100  of its height producing a sudden glitch on the elements below it  When sliding out up  the element does a translateY -100   and then suddenly disappears  causing another glitch on the elements below it   You can implement a slide in and slide out like so  my-component ts import   animate  style  transition  trigger   from   angular animations     Component           animations        trigger  slideDownUp           transition   enter    style   height  0     animate 500           transition   leave    animate 500  style   height  0                         my-component html  lt div  slideDownUp  ngIf  quot isShowing quot  class  quot box quot  gt    I am the content of the div   lt  div gt   my-component scss  box     overflow  hidden

User · Answer

First some code  then the explanaition  The official docs describing this are here   import   trigger  transition  animate  style   from   angular animations    Component           animations        trigger  slideInOut           transition   enter             style  transform   translateY -100               animate  200ms ease-in   style  transform   translateY 0                       transition   leave             animate  200ms ease-in   style  transform   translateY -100                                In your template    lt div  ngIf  visible    slideInOut  gt This element will slide up and down when the value of  visible  changes from true to false and vice versa  lt  div gt    I found the angular way a bit tricky to grasp  but once you understand it  it quite easy and powerful   The animations part in human language     We re naming this animation  slideInOut   When the element is added   enter   we do the following  - Immediately move the element 100  up  from itself   to appear off screen  - then animate the translateY value until we are at 0   where the element would naturally be  When the element is removed  animate the translateY value  currently 0   to -100   off screen     The easing function we re using is ease-in  in 200 milliseconds  you can change that to your liking   Hope this helps

User · Answer

I answered a very similar question  and here is a way of doing this    First  create a file where you would define your animations and export them  Just to make it more clear in your app component ts  In the following example  I used a max-height of the div that goes from 0px  when it s hidden   to 500px  but you would change that according to what you need   This animation uses states  in and out   that will be toggle when we click on the button  which will run the animtion   animations ts  import   trigger  state  style  transition      animate  group  query  stagger  keyframes   from   angular animations    export const SlideInOutAnimation         trigger  slideInOut             state  in   style                max-height    500px    opacity    1    visibility    visible                       state  out   style                max-height    0px    opacity    0    visibility    hidden                       transition  in   gt  out    group               animate  400ms ease-in-out   style                    opacity    0                               animate  600ms ease-in-out   style                    max-height    0px                               animate  700ms ease-in-out   style                    visibility    hidden                                                 transition  out   gt  in    group               animate  1ms ease-in-out   style                    visibility    visible                               animate  600ms ease-in-out   style                    max-height    500px                               animate  800ms ease-in-out   style                    opacity    1                                                    Then in your app component  we import the animation and create the method that will toggle the animation state   app component ts  import   SlideInOutAnimation   from    animations     Component           animations   SlideInOutAnimation     export class AppComponent      animationState    in             toggleShowDiv divName  string        if  divName      divA           console log this animationState         this animationState   this animationState      out     in     out         console log this animationState                 And here is how your app component html would look like     lt div class  wrapper  gt     lt button  click   toggleShowDiv  divA    gt TOGGLE DIV lt  button gt     lt div   slideInOut   animationState  style  height  100px  background-color  red   gt    THIS DIV IS ANIMATED lt  div gt     lt div class  content  gt THIS IS CONTENT DIV lt  div gt   lt  div gt    slideInOut refers to the animation trigger defined in animations ts  Here is a StackBlitz example I have created   https   angular-muvaqu stackblitz io   Side note   If an error ever occurs and asks you to add BrowserAnimationsModule  just import it in your app module ts   import   BrowserAnimationsModule   from   angular platform-browser animations     NgModule     imports         BrowserAnimationsModule

[angular] Angular (4, 5, 6, 7) - Simple example of slide in out animation on ngIf

Examples related to angular

Examples related to typescript

Examples related to angular-animations