switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    ubuntu
    Help! I’ve Had To SSH Into A Linux Box For The First Time (Part 3)
    Sep 12, 2022
    misconceptions about software development
    Misconceptions About Software Development
    Sep 26, 2022

    Adding Animation To Your Application The Angular Way

    Categories
    • Software Development
    • Web Development
    Tags
    animation
    animation

    Adding animation effects could be done in a number of ways, namely CSS/SASS or a library, but Angular could also do this plus the benefit of reusability and easy implementation.

    Starting Point

    Firstly we have to make sure we have the animations package installed (creating a new project usually has this added already).

    Install the animations package:

    Adding animation to your application the Angular way

    npm install --save @angular/animations

    Then just add the BrowserAnimationModule to you app's main .module file.

    Adding animation to your application the Angular way

    Now the fun starts

    Lets define an animation (I decided to create a separate module file to hold all my animation styles).

    Adding animation to your application the Angular way

    Note that I also had to import all the animation methods used in my logic.

    Adding animation to your application the Angular way

    All of these built-in methods all have an important task:

    • trigger - accepts a name for the animation trigger and an array of state and transition methods to configure the animation.
    • style - CSS styles to be applied.
    • transition - specifies the configuration for transitioning between the different states and its direction.
    • animate - specifies the duration and any additional CSS animation properties such as easing.

    Let's Implement

    On the page/component I want to use my animation, import it into the component class;

     

    Adding animation to your application the Angular way

    and add it to the component decorator using the animations property.

    Adding animation to your application the Angular way

    Now simply add this animation to any div or directive you would like to animate like so;

    Adding animation to your application the Angular way

    And that's how easy it is to add animations in an Angular app.

    Note how easy it would be to reuse this animation in a different component or event import and add more than one animation to the same component.

    Contact us


      Related posts:

      rules for ux designersRules For UX Designers angularUpdating A Primitive Type Variable From A Service In Angular intergrating vuex in laravel and vue applicationIntegrating Vuex Into Your Laravel Vue Application how to implement a cropper tools in your frontend vue applicationHow To Implement A Cropper Tool In Your Frontend Vue Application
      Share
      0
      Werner Bestbier
      Werner Bestbier
      Werner is a front-end developer with a background in design. Making a users web-surfing life easy is his game. His preferred language/framework is Javascript and Angular.

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy