12-1 Animations in AngularJS Explained
Key Concepts
- CSS Transitions
- CSS Keyframes
- ngAnimate Module
- Enter and Leave Animations
- Class-Based Animations
- ngClass and ngShow/ngHide
- ngRepeat Animations
- ngView and ngInclude Animations
- Custom Animations
- JavaScript Animations
- Animation Callbacks
- Performance Considerations
1. CSS Transitions
CSS transitions allow property changes in CSS values to occur smoothly over a specified duration. They are the foundation for simple animations in AngularJS.
Example:
.element {
transition: background-color 0.5s ease;
}
.element:hover {
background-color: #ff0000;
}
Imagine CSS transitions as a slow-motion camera capturing a change in color, making the transition smooth and visually appealing.
2. CSS Keyframes
CSS keyframes define the steps of an animation. They allow you to specify the intermediate steps in a CSS animation sequence.
Example:
@keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
.element {
animation: slide 2s infinite;
}
Think of CSS keyframes as a storyboard for an animation, detailing each frame (step) of the action.
3. ngAnimate Module
The ngAnimate module provides support for CSS-based animations (and JavaScript-based animations) triggered by AngularJS's HTML directives.
Example:
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="toggle = !toggle">Toggle</button>
<div ng-show="toggle" class="fade">Content</div>
</div>
Consider ngAnimate as the director's assistant, ensuring that animations are triggered at the right moments in the AngularJS application.
4. Enter and Leave Animations
Enter and leave animations are used to animate elements as they are added to or removed from the DOM. These are often used with ngRepeat, ngIf, and ngSwitch.
Example:
.fade.ng-enter {
transition: 0.5s linear all;
opacity: 0;
}
.fade.ng-enter.ng-enter-active {
opacity: 1;
}
.fade.ng-leave {
transition: 0.5s linear all;
opacity: 1;
}
.fade.ng-leave.ng-leave-active {
opacity: 0;
}
Imagine enter and leave animations as a curtain rising (enter) and falling (leave) to reveal or hide a stage.
5. Class-Based Animations
Class-based animations involve adding and removing CSS classes to trigger animations. This is commonly used with ngClass and ngShow/ngHide.
Example:
.slide.ng-enter {
transition: 0.5s linear all;
transform: translateX(-100%);
}
.slide.ng-enter.ng-enter-active {
transform: translateX(0);
}
Think of class-based animations as a magician's trick, where adding or removing a class (hat) triggers a visual transformation.
6. ngClass and ngShow/ngHide
ngClass and ngShow/ngHide are AngularJS directives that can be used to dynamically add or remove classes and show or hide elements, respectively, triggering animations.
Example:
<div ng-class="{'highlight': isHighlighted}">Content</div>
<div ng-show="isVisible" class="fade">Content</div>
Consider ngClass and ngShow/ngHide as stage lights that highlight (ngClass) or reveal/conceal (ngShow/ngHide) elements on a stage.
7. ngRepeat Animations
ngRepeat animations are used to animate elements as they are added, moved, or removed from a list. This is particularly useful for dynamic lists.
Example:
<div ng-repeat="item in items" class="slide">{{item}}</div>
Imagine ngRepeat animations as a conveyor belt, where each item (element) slides into place as it is added to the list.
8. ngView and ngInclude Animations
ngView and ngInclude animations are used to animate the transition between different views or included templates.
Example:
<div ng-view class="fade"></div>
Think of ngView and ngInclude animations as changing scenes in a play, where each scene (view/template) fades in and out smoothly.
9. Custom Animations
Custom animations allow you to define your own animation logic using JavaScript. This is useful for complex or non-standard animations.
Example:
app.animation('.custom-animation', function() {
return {
enter: function(element, done) {
// Custom enter animation logic
done();
},
leave: function(element, done) {
// Custom leave animation logic
done();
}
};
});
Consider custom animations as a director's vision, where you create unique and specific effects to enhance the performance.
10. JavaScript Animations
JavaScript animations involve using JavaScript to manipulate the DOM and CSS properties to create animations. This can be more powerful but also more complex than CSS animations.
Example:
app.animation('.js-animation', function() {
return {
enter: function(element, done) {
element.css('opacity', 0);
jQuery(element).animate({opacity: 1}, 1000, done);
}
};
});
Think of JavaScript animations as a puppeteer, where you directly control the strings (DOM manipulations) to make the puppet (element) move.
11. Animation Callbacks
Animation callbacks are functions that are called when an animation starts or ends. They are useful for coordinating multiple animations or performing actions after an animation completes.
Example:
app.animation('.callback-animation', function() {
return {
enter: function(element, done) {
element.css('opacity', 0);
element.animate({opacity: 1}, 1000, function() {
console.log('Animation complete');
done();
});
}
};
});
Consider animation callbacks as stagehands, who signal (callback) when a scene (animation) is ready to proceed or has finished.
12. Performance Considerations
Performance considerations are important when using animations, as excessive or poorly implemented animations can slow down the application. Techniques like hardware acceleration and minimizing reflows can improve performance.
Example:
.element {
transform: translateZ(0); /* Force hardware acceleration */
}
Think of performance considerations as tuning a race car. You optimize (hardware acceleration) and fine-tune (minimize reflows) to ensure the car (application) performs at its best.