Getting Started with CSS-based Animations

AngularJS 1    |    Intermediate
  • 13 videos | 1h 55s
  • Earns a Badge
Likes 17 Likes 17
Animation can enhance both your web application and the user's experience. Learn how to implement CSS-based animation in AngularJS, including how to use animation libraries such as animate.css within your applications.

WHAT YOU WILL LEARN

  • add the ngAnimate module as a dependency in an AngularJS application
    create, enter, and leave transition animations for AngularJS directives such as, ngInclude, ngView, ngIf, ngSwitch
    ensure that transition animations for nested directives work as expected
    animate ngRepeat items entering and leaving the DOM
    create a move transition animation for the AngularJS directive ngRepeat
    create, add, and remove animations for AngularJS directive such as ng-show, ng-hide, and ng-class
    animate the ngHide and ngShow directives in AngularJS
  • create animations that run when Angular performs form validation
    create animations for the AngularJS directive ngMessages
    use CSS keyframe animations in AngularJS
    use CSS animation libraries in AngularJS
    add support for AngularJS animation to a custom directive
    work with promises returned by the methods in the $animate service

IN THIS COURSE

  • 4m 20s
    During this video, you will learn how to add the ngAnimate module as a dependency to an AngularJS application. FREE ACCESS
  • 4m 26s
    In this video, learn how to create, enter, and leave transition animations for AngularJS directives such as ngInclude, ngView, ngIf, and ngSwitch. FREE ACCESS
  • Locked
    3.  Working with Child Animations
    4m 37s
    In this video, find out how to ensure that transition animations for nested directives work as expected. FREE ACCESS
  • Locked
    4.  Entering and Leaving with ngRepeat
    6m 24s
    Learn how to animate ngRepeat items when they enter and leave the DOM. FREE ACCESS
  • Locked
    5.  Move Animations with ngRepeat
    3m 21s
    In this video, find out how to create a move transition animation for the AngularJS directive ng-repeat. FREE ACCESS
  • Locked
    6.  Add and Remove Animations with ngClass
    5m 3s
    In this video, you will create, add, and remove animations for AngularJS directives such as ng-show, ng-hide, and ng-class. FREE ACCESS
  • Locked
    7.  Animating ngHIde and ngShow
    4m 33s
    In this video, you will animate the ngHide and ngShow directives in AngularJS. FREE ACCESS
  • Locked
    8.  Animating Form Validation
    4m 13s
    In this video, find out how to create animations that run when Angular performs form validation. FREE ACCESS
  • Locked
    9.  Animating Forms and ngMessages
    4m 36s
    In this video, you will create animations for the AngularJS directive ngMessages. FREE ACCESS
  • Locked
    10.  Using CSS Keyframe Animations
    7m 29s
    Learn how to use CSS keyframe animations in AngularJS. FREE ACCESS
  • Locked
    11.  Using CSS Animation Libraries
    4m 20s
    In this video, you will use CSS animation libraries with AngularJS. FREE ACCESS
  • Locked
    12.  Animating a Custom Directive
    4m 33s
    Learn how to add support for AngularJS animation to a custom directive. FREE ACCESS
  • Locked
    13.  Working with $animate Promises
    3m 1s
    Find out how to work with promises returned by the methods in the $animate service. FREE ACCESS

EARN A DIGITAL BADGE WHEN YOU COMPLETE THIS COURSE

Skillsoft is providing you the opportunity to earn a digital badge upon successful completion on some of our courses, which can be shared on any social network or business platform.

Digital badges are yours to keep, forever.

YOU MIGHT ALSO LIKE

Course Angular 11: Getting Started with Angular
Likes 286 Likes 286  
Course Using graphic elements in PowerPoint 365
Channel MEAN.js
Likes 3 Likes 3