Have you leveraged examples from really well-done sites like http://www.nganimate.org/ while trying to figure out why your animations weren't working? I did, before realizing that animations were revamped in Angular 1.2 (serves me right for not reading the official docs first), and a lot of the examples found online no longer function for Angular 1.2-1.3.
So, in the interest of getting you started, here is the most basic example of using ngAnimate I put together.
JSFiddle: http://jsfiddle.net/Dnqs9/16/
When trying to recreate this locally, don't forget to include angular.js and angular-animate.js in your html head tag, like:
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
HTML
Let's look at the HTML first.
<body ng-app="myApp">
<div ng-controller="animateExampleCtrl">
<h1>Animate Example</h1>
<button ng-click="addItem()">Click to add an item</button>
<button ng-click="remItem()">Click to remove an item</button>
<ul>
<li ng-repeat="item in listData" class="animation">{{item}}</li>
</ul>
</div>
</body>
The first two lines associate the module and controller to an area on the page. This is followed by an add button and a remove button, which call into simple behaviors on the controller that add items and remove items, shown below in the javascript section. Contained within is an unordered list (indicated by the <ul> tag) with an ng-repeat directive on the list item that prints out all of the list items part of the $scope.listData array defined in the controller as well as associates the animation css class.
Javascript
var dataLoader = angular.module("myApp", ["ngAnimate"]);
dataLoader.controller("animateExampleCtrl", function ($scope) {
$scope.listData = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
$scope.dataCounter = 4;
$scope.addItem = function () {
$scope.dataCounter++;
$scope.listData.push('Item ' + $scope.dataCounter);
};
$scope.remItem = function () {
$scope.listData.pop();
};
});
Note that I had to add the $scope.dataCounter variable, as Angular requires items within an ng-repeat directive to have a unique key (in this case, since listData is just an array of strings, the key is the value). Lastly, and most importantly, the css.
CSS
This class dictates how long the transaction should take when an item is added (ng-enter) and is removed (ng-leave).
.animation.ng-enter, .animation.ng-leave {
-webkit-transition: 1s;
}
This class indicates on entry the starting values for the css.
.animation.ng-enter {
opacity: 0;
}
This class indicates on leaving the starting values for the css.
.animation.ng-leave {
opacity: 1;
}
This class indicates what the resulting css should be when the item has been fully transitioned in.
.animation.ng-enter.ng-enter-active {
opacity: 1;
}
This class indicates what the result css should be when the item has been fully transitioned out.
.animation.ng-leave.ng-leave-active {
opacity: 0;
}
Further reading: https://docs.angularjs.org/guide/animations
So, in the interest of getting you started, here is the most basic example of using ngAnimate I put together.
JSFiddle: http://jsfiddle.net/Dnqs9/16/
When trying to recreate this locally, don't forget to include angular.js and angular-animate.js in your html head tag, like:
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
HTML
Let's look at the HTML first.
<body ng-app="myApp">
<div ng-controller="animateExampleCtrl">
<h1>Animate Example</h1>
<button ng-click="addItem()">Click to add an item</button>
<button ng-click="remItem()">Click to remove an item</button>
<ul>
<li ng-repeat="item in listData" class="animation">{{item}}</li>
</ul>
</div>
</body>
The first two lines associate the module and controller to an area on the page. This is followed by an add button and a remove button, which call into simple behaviors on the controller that add items and remove items, shown below in the javascript section. Contained within is an unordered list (indicated by the <ul> tag) with an ng-repeat directive on the list item that prints out all of the list items part of the $scope.listData array defined in the controller as well as associates the animation css class.
Javascript
var dataLoader = angular.module("myApp", ["ngAnimate"]);
dataLoader.controller("animateExampleCtrl", function ($scope) {
$scope.listData = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
$scope.dataCounter = 4;
$scope.addItem = function () {
$scope.dataCounter++;
$scope.listData.push('Item ' + $scope.dataCounter);
};
$scope.remItem = function () {
$scope.listData.pop();
};
});
Note that I had to add the $scope.dataCounter variable, as Angular requires items within an ng-repeat directive to have a unique key (in this case, since listData is just an array of strings, the key is the value). Lastly, and most importantly, the css.
CSS
This class dictates how long the transaction should take when an item is added (ng-enter) and is removed (ng-leave).
.animation.ng-enter, .animation.ng-leave {
-webkit-transition: 1s;
}
This class indicates on entry the starting values for the css.
.animation.ng-enter {
opacity: 0;
}
This class indicates on leaving the starting values for the css.
.animation.ng-leave {
opacity: 1;
}
This class indicates what the resulting css should be when the item has been fully transitioned in.
.animation.ng-enter.ng-enter-active {
opacity: 1;
}
This class indicates what the result css should be when the item has been fully transitioned out.
.animation.ng-leave.ng-leave-active {
opacity: 0;
}
Further reading: https://docs.angularjs.org/guide/animations
No comments:
Post a Comment