Open xueenda opened 9 years ago
Hi @xueenda an easy way to fix that is create a directive animation
for example and bind an event on keyup (maybe add a debounce here) that triggers the effects you wish. In this case blinds.
$timeout(function() {
ionic.material.motion.blinds();
}, 300);
Hope it works well for you.
No able to get animations while using ng-repeat getting class name is undefined error. Help would be grateful.
You get the error because the DOM is not ready when calling ripple() and displayEffect(). ngRepeat takes a while to add all items to the DOM, so you'll have to call those functions after the last element of the list has been rendered.
I use this directive
.directive('ngLastRepeat', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngLastRepeat'+ (attr.ngLastRepeat ? '.'+attr.ngLastRepeat : ''));
});
}
}
};
})
like this:
<div ng-repeat="..." ng-last-repeat="mylist">
Javascript:
// Animate list on this event
$scope.$on('ngLastRepeat.mylist',function(e) {
$timeout(function(){
ionicMaterialMotion.fadeSlideInRight();
ionicMaterialInk.displayEffect();
},0); // No timeout delay necessary.
});
Unfortunately I can't remember where I got this from (was on StackOverflow), but there are plenty of other posts showing directives to run something after the last element of ngRepeat has been rendered.
When I try to filter the list, the whole list is gone. Without animation everything works fine.
Here is the code I have: