angular 2 ngIf and CSS transition animation

Question

I want a div to slide in from the right in angular 2 using css      lt div class  note   ngClass     transition  show    ngIf  show  gt       lt p gt  Notes lt  p gt     lt  div gt     lt button class  btn btn-default   click   toggle show   gt Toggle lt  button gt    I works fine if i only use  ngClass  to toggle class and utilise opacity  But li don t want that element to be rendered from the beginning so I  hide  it with ngIf first  but then the transition wont t work    transition    -webkit-transition  opacity 1000ms ease-in-out margin-left 500ms ease-in-out    -moz-transition  opacity 1000ms ease-in-out margin-left 500ms ease-in-out    -ms-transition  opacity 1000ms ease-in-out margin-left 500ms ease-in-out     -o-transition  opacity 1000ms ease-in-out margin-left 500ms ease-in-out    transition  opacity 1000ms ease-in-out margin-left 500ms ease-in-out    margin-left  1500px    width  200px    opacity  0      transition    opacity  100    margin-left  0

User · Accepted Answer

update 4 1 0  Plunker  See also https   github com angular angular blob master CHANGELOG md 400-rc1-2017-02-24  update 2 1 0  Plunker  For more details see Animations at angular io  import   trigger  style  animate  transition   from   angular animations     Component     selector   my-app     animations        trigger         enterAnimation             transition   enter               style  transform   translateX 100     opacity  0              animate  500ms   style  transform   translateX 0    opacity  1                        transition   leave               style  transform   translateX 0    opacity  1              animate  500ms   style  transform   translateX 100     opacity  0                                    template         lt button  click   show    show  gt toggle show    show    lt  button gt        lt div  ngIf  show    enterAnimation  gt xxx lt  div gt         export class App     show boolean   false      original   ngIf removes the element from the DOM when the expression becomes false  You can t have a transition on a non-existing element   Use instead hidden    lt div class  note   ngClass     transition  show    hidden    show  gt

User · Answer

According to the latest angular 2 documentation you can animate  Entering and Leaving  elements  like in angular 1     Example of simple fade animation   In relevant  Component add   animations      trigger  fadeInOut         transition   enter           enter is alias to  void   gt           style  opacity 0          animate 500  style  opacity 1                 transition   leave           leave is alias to      gt  void        animate 500  style  opacity 0                     Do not forget to add imports  import  style  state  animate  transition  trigger  from   angular animations     The relevant component s html s element should look like    lt div  ngIf  toggle    fadeInOut  gt element lt  div gt    I built example of slide and fade animation here   Explanation on  void  and        void is the state when ngIf is set to false  it applies when the element is not attached to a view     - There can be many animation states  read more in docs   The   state takes precedence over all of them as a  wildcard   in my example this is the state when ngIf is set to true     Notice  taken from angular docs     Extra declare inside the app module  import   BrowserAnimationsModule   from   angular platform-browser animations        Angular animations are built on top of the standard Web Animations API   and run natively on browsers that support it  For other browsers  a   polyfill is required  Grab web-animations min js from GitHub and add   it to your page

User · Answer

CSS only solution for modern browsers   keyframes slidein       0     margin-left 1500px       100   margin-left 0px      note       animation-name  slidein      animation-duration   9s      display  block

User · Answer

In my case I declared the animation on the wrong component by mistake   app component html     lt app-order-details  ngIf  orderDetails    fadeInOut   orderDetails   orderDetails  gt     lt  app-order-details gt    The animation needs to be declared on the component where the element is used in  appComponent ts   I was declaring the animation on OrderDetailsComponent ts instead   Hopefully it will help someone making the same mistake

User · Answer

One way is to use a setter for the ngIf property and set the state as part of updating the value   StackBlitz example  fade component ts   import       animate      AnimationEvent      state      style      transition      trigger     from   angular animations     import   ChangeDetectionStrategy  Component  Input   from   angular core      export type FadeState    visible     hidden       Component       selector   app-fade       templateUrl     fade component html       styleUrls      fade component scss        animations          trigger  state             state             visible             style               opacity   1                                  state             hidden             style               opacity   0                                  transition      gt  visible    animate  500ms ease-out              transition  visible   gt  hidden    animate  500ms ease-out                         changeDetection  ChangeDetectionStrategy OnPush        export class FadeComponent       state  FadeState         tslint disable-next-line  variable-name     private  show  boolean      get show           return this  show             Input       set show value  boolean          if  value            this  show   value          this state    visible           else           this state    hidden                      animationDone event  AnimationEvent          if  event fromState      visible   amp  amp  event toState      hidden             this  show   false                      fade component html    lt div      ngIf  show      class  fade        state   state        state done   animationDone  event      gt       lt button mat-raised-button color  primary  gt test lt  button gt     lt  div gt    example component css   host     display  block     fade     opacity  0

User · Answer

Am using angular 5 and for an ngif to work for me that is in a ngfor  I had to use animateChild and in the user-detail component I used the  ngIf  user expanded  to show hide user and it worked for entering a leaving    lt div  ngFor  let user of users   flyInParent gt     lt ly-user-detail  user    user   flyIn gt  lt  user-detail gt   lt  div gt     the animation file   export const FLIP TRANSITION      trigger  flyInParent         transition   enter   leave           query       animateChild                   trigger  flyIn         state  void   style  width   100    height   100           state      style  width   100    height   100           transition   enter           style           transform   translateY 100             position   fixed                  animate  0 5s cubic-bezier 0 35  0  0 25  1    style  transform   translateY 0                   transition   leave           style           transform   translateY 0             position   fixed                  animate  0 5s cubic-bezier 0 35  0  0 25  1    style  transform   translateY 100

User · Answer

trigger  slideIn           state      style    overflow-y    hidden             state  void   style    overflow-y    hidden             transition      gt  void             style   height                  animate 250  style   height  0                     transition  void   gt                style   height   0              animate 250  style   height

[css] angular 2 ngIf and CSS transition/animation

Examples related to css

Examples related to angular

Examples related to angular-animations