标签:style blog http io ar color sp for strong
Also read: http://www.cnblogs.com/Answer1215/p/3941966.html
Using ngAnimate:
//!annotate="YourApp" Your AngularJS Module|Replace this or ngModule with the module that you used to define your application. var ngModule = angular.module(‘YourApp‘, [‘ngAnimate‘]); ngModule.animation(‘.my-crazy-animation‘, function() { return { enter: function(element, done) { //run the animation here and call done when the animation is complete return function(cancelled) { //this (optional) function will be called when the animation //completes or when the animation is cancelled (the cancelled //flag will be set to true if cancelled). }; }, leave: function(element, done) { }, move: function(element, done) { }, //animation that can be triggered before the class is added beforeAddClass: function(element, className, done) { }, //animation that can be triggered after the class is added addClass: function(element, className, done) { }, //animation that can be triggered before the class is removed beforeRemoveClass: function(element, className, done) { }, //animation that can be triggered after the class is removed removeClass: function(element, className, done) { } }; });
Example:
js:
angular.module(‘categories‘, [ ‘eggly.models.categories‘, ‘ngAnimate‘ ]) .config(function ($stateProvider) { $stateProvider .state(‘eggly.categories‘, { url: ‘/‘, views: { ‘categories@‘: { controller: ‘CategoriesController‘, templateUrl: ‘app/categories/categories.tmpl.html‘ }, ‘bookmarks@‘: { controller: ‘BookmarksController‘, templateUrl: ‘app/categories/bookmarks/bookmarks.tmpl.html‘ } } }); }) .controller(‘CategoriesController‘, function ($scope) { }) .directive(‘menuItem‘, function(){ var controller = function($scope){ $scope.mouse_over = false; }; return { scope: true, controller: controller } }) .animation(‘.menu-animation‘, function () { return { beforeAddClass: function (element, className, done) { if (className == ‘highlight‘) { TweenLite.to(element, 0.2, { width: ‘223‘, borderLeft: ‘10px solid #89CD25‘, onComplete: done }); TweenLite.to(element.find(‘a‘), 0.2, { color: "#89CD25" }); } else { done(); } }, beforeRemoveClass: function (element, className, done) { if (className == ‘highlight‘) { TweenLite.to(element, 0.4, { width: ‘180‘, borderLeft: ‘5px solid #333‘, onComplete: done }); TweenLite.to(element.find(‘a‘), 0.4, { color: "#5bc0de" }); } else { done(); } } }; });
HTML:
<a ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a> <ul class="nav nav-sidebar"> <li menu-item ng-repeat="category in categories" class="menu-animation" ng-class="{‘highlight‘:mouse_over}" ng-mouseenter="mouse_over = true" ng-mouseleave="mouse_over = false" ng-class="{‘active‘:isCurrentCategory(category)}"> <a ng-click="setCurrentCategory(category)"> {{category.name}} </a> </li> </ul>
[AnuglarJS] TweenMax with ngAnimate
标签:style blog http io ar color sp for strong
原文地址:http://www.cnblogs.com/Answer1215/p/4119731.html