++ +As you can see, the `.repeated-item` class is present on the element that will be repeated and this class will be +used as a reference within our application's CSS and/or JavaScript animation code to tell AngularJS to perform an animation. + +As ngRepeat does its thing, each time a new item is added into the list, ngRepeat will add +a `ng-enter` class name to the element that is being added. When removed it will apply a `ng-leave` class name and when moved around +it will apply a `ng-move` class name. + +Taking a look at the following CSS code, we can see some transition and keyframe animation code set for each of those events that +occur when ngRepeat triggers them: + ++ {{ item.id }} ++
+/*
+ We're using CSS transitions for when
+ the enter and move events are triggered
+ for the element that has the .repeated-item
+ class
+*/
+.repeated-item.ng-enter, .repeated-item.ng-move {
+ -webkit-transition:0.5s linear all;
+ -moz-transition:0.5s linear all;
+ -o-transition:0.5s linear all;
+ transition:0.5s linear all;
+ opacity:0;
+}
+
+/*
+ The ng-enter-active and ng-move-active
+ are where the transition destination properties
+ are set so that the animation knows what to
+ animate.
+*/
+.repeated-item.ng-enter.ng-enter-active,
+.repeated-item.ng-move.ng-move-active {
+ opacity:1;
+}
+
+/*
+ We're using CSS keyframe animations for when
+ the leave event is triggered for the element
+ that has the .repeated-item class
+*/
+.repeated-item.ng-leave {
+ -webkit-animation:0.5s my_animation;
+ -moz-animation:0.5s my_animation;
+ -o-animation:0.5s my_animation;
+ animation:0.5s my_animation;
+}
+
+@keyframes my_animation {
+ from { opacity:1; }
+ to { opacity:0; }
+}
+
+/*
+ Unfortunately each browser vendor requires
+ its own definition of keyframe animation code...
+*/
+@-webkit-keyframes my_animation {
+ from { opacity:1; }
+ to { opacity:0; }
+}
+
+@-moz-keyframes my_animation {
+ from { opacity:1; }
+ to { opacity:0; }
+}
+
+@-o-keyframes my_animation {
+ from { opacity:1; }
+ to { opacity:0; }
+}
+
+
+The same approach to animation can be used using JavaScript code (**jQuery is used within to perform animations**):
+
+
+myModule.animation('.repeated-item', function() {
+ return {
+ enter : function(element, done) {
+ element.css('opacity',0);
+ jQuery(element).animate({
+ opacity: 1
+ }, done);
+
+ // optional onDone or onCancel callback
+ // function to handle any post-animation
+ // cleanup operations
+ return function(isCancelled) {
+ if(isCancelled) {
+ jQuery(element).stop();
+ }
+ }
+ },
+ leave : function(element, done) {
+ element.css('opacity', 1);
+ jQuery(element).animate({
+ opacity: 0
+ }, done);
+
+ // optional onDone or onCancel callback
+ // function to handle any post-animation
+ // cleanup operations
+ return function(isCancelled) {
+ if(isCancelled) {
+ jQuery(element).stop();
+ }
+ }
+ },
+ move : function(element, done) {
+ element.css('opacity', 0);
+ jQuery(element).animate({
+ opacity: 1
+ }, done);
+
+ // optional onDone or onCancel callback
+ // function to handle any post-animation
+ // cleanup operations
+ return function(isCancelled) {
+ if(isCancelled) {
+ jQuery(element).stop();
+ }
+ }
+ },
+
+ // you can also capture these animation events
+ addClass : function(element, className, done) {},
+ removeClass : function(element, className, done) {}
+ }
+});
+
+
+With these generated CSS class names present on the element at the time, AngularJS automatically
+figures out whether to perform a CSS and/or JavaScript animation. If both CSS and JavaScript animation
+code is present, and match the CSS class name on the element, then AngularJS will run both animations at the same time.
+
+## Class and ngClass animation hooks
+
+AngularJS also pays attention to CSS class changes on elements by triggering the **add** and **remove** hooks.
+This means that if a CSS class is added to or removed from an element then an animation can be executed in between
+before the CSS class addition or removal is finalized. (Keep in mind that AngularJS will only be
+able to capture class changes if an **expression** or the **ng-class** directive is used on the element.)
+
+The example below shows how to perform animations during class changes:
+
+
+
+
+
+ CSS-Animated Text
+
+myModule.directive('my-directive', ['$animate', function($animate) {
+ return function(element, scope, attrs) {
+ element.bind('click', function() {
+ if(element.hasClass('clicked')) {
+ $animate.removeClass(element, 'clicked');
+ } else {
+ $animate.addClass(element, 'clicked');
+ }
+ });
+ };
+}]);
+
+
+## More about animations
+
+For a full breakdown of each method available on `$animate`, see the {@link api/ngAnimate.$animate API documentation}.
+
+To see a complete demo, see the {@link tutorial/step_12 animation step within the AngularJS phonecat tutorial}.
--
cgit v1.2.3