Last active
July 21, 2017 12:04
-
-
Save FGRibreau/9504619 to your computer and use it in GitHub Desktop.
How to configure ng-animate to only work on a specified list of elements
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// First configure $animateProvider | |
angular.module('MyApp', ['ngAnimate']).config(['$animateProvider', function($animateProvider){ | |
// restrict animation to elements with the bi-animate css class with a regexp. | |
// note: "bi-*" is our css namespace at @Bringr. | |
$animateProvider.classNameFilter(/bi-animate/); | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Then add bi-animate on elements you want to animate --> | |
<!-- [...] --> | |
<div class="bi-animate animate-opacity" ng-repeat="trigger in alert.triggers"> | |
<!-- Elements inside this div won't be animated with .ng-enter, .ng-leave, ... --> | |
</div> | |
<!-- [...] --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// For reference only, extracted from angular.js g3_v1_0 | |
/** | |
* @ngdoc method | |
* @name $animateProvider#classNameFilter | |
* | |
* @description | |
* Sets and/or returns the CSS class regular expression that is checked when performing | |
* an animation. Upon bootstrap the classNameFilter value is not set at all and will | |
* therefore enable $animate to attempt to perform an animation on any element. | |
* When setting the classNameFilter value, animations will only be performed on elements | |
* that successfully match the filter expression. This in turn can boost performance | |
* for low-powered devices as well as applications containing a lot of structural operations. | |
* @param {RegExp=} expression The className expression which will be checked against all animations | |
* @return {RegExp} The current CSS className expression value. If null then there is no expression value | |
*/ | |
this.classNameFilter = function(expression) { | |
if(arguments.length === 1) { | |
this.$$classNameFilter = (expression instanceof RegExp) ? expression : null; | |
} | |
return this.$$classNameFilter; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment