Scribd Logo
Upload

Welcome to Scribd!

  • 13 views

    Angular Animations: Jogesh K. Muppala

    Uploaded by

    vikram
    Angular animations allow building animations using Angular with similar native performance as CSS animations. Animations are defined within the @Component metadata and are built around transitions between element states driven by model attributes. Key aspects include importing animation modules and functions, defining states and transitions, and handling enter/exit transitions.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Angular Animations: Jogesh K. Muppala

    Uploaded by

    vikram
    13 views5 pages
    Angular animations allow building animations using Angular with similar native performance as CSS animations. Animations are defined within the @Component metadata and are built around transitions between element states driven by model attributes. Key aspects include importing animation modules and functions, defining states and transitions, and handling enter/exit transitions.

    Original Description:

    animations in angular

    Original Title

    Animations

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Angular animations allow building animations using Angular with similar native performance as CSS animations. Animations are defined within the @Component metadata and are built around transitions between element states driven by model attributes. Key aspects include importing animation modules and functions, defining states and transitions, and handling enter/exit transitions.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    13 views5 pages

    Angular Animations: Jogesh K. Muppala

    Uploaded by

    vikram
    Angular animations allow building animations using Angular with similar native performance as CSS animations. Animations are defined within the @Component metadata and are built around transitions between element states driven by model attributes. Key aspects include importing animation modules and functions, defining states and transitions, and handling enter/exit transitions.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 5

    Angular

    Animations

    Jogesh K. Muppala
    Angular Animations
    • Build animations using Angular with the same kind of
    native performance as pure CSS animations
    • Built on top of the Web Animations API
    – For browsers not supporting the Web Animations API,
    need to use a polyfill web-animations.min.js
    • Tightly integrate the animation logic with the rest of
    the application code

    2
    Animations
    • Animations built around transitions of an element between
    states driven by a model attribute
    • Defined inside the @Component metadata
    • Need to import some animation-specific imports and
    functions:
    – BrowserAnimationsModule
    – trigger, state, style, animate, transition from
    @angular/animations

    3
    States and Transitions
    shown => hidden

    shown hidden

    hidden => shown

    4
    States and Transitions
    • ”void” state: element is not attached to a view
    • ”*” any state: wildcard
    • void => *is equivalent to :enter
    • * => void is equivalent to :leave

    You might also like