ngFx Animation in Ionic

ionic-v1
1

Hallo Folks,

I have been trying out ‘ngFx’ Animations library with Ionic and it works perfect. My situation is I want to apply animations to items in a list on enter and leave (item by item). At the moment , Animation is aplied to list as a whole.

For example, If I apply fade In animations in list created with ng-repeat using timeout , the whole list fades in and not item by item.

Is there some workaround for it?

ngFx Git Link

Can someone help me please.

Thanks in advance!! :smile:

1 Like
2

Soo, this one took me down a the rabbit hole and relearned the tough lesson about closures in js…

So what you’re describing technically is correct. You need to stagger the array and push each item out.

1 Like
3

@mhartington
I have a multidimensional array :

$scope.cards=[

[
{title:‘word0’,color:‘black’},
{title:‘Word1’, color:‘green’},
{title:‘Word2’, color:‘yellow’}
],
[
{title:‘Word4’, color:‘blue’},
{title:‘Word5’, color:‘red’},
{title:‘Word6’, color:‘red’}
]
];

So I wrote code to build each array element :

for (var i=0; i< $scope.cards.length; i++){
        for (var j=0; j< $scope.cards[i].length;j++){
            $timeout(function(){
            $scope.animCards[i][j].push($scope.cards[i][j]);
            },j*300);
        }
    }

This is my template:

<div class="row"  ng-repeat="row in animCards">
  
    <div class="col" ng-repeat="col in row">
        
                {{col.title}}

         </div>
</div>

This doesn’t work. I’m not sure what really is the problem. Do you think you could suggest something about it?

Thank you!

4

In that case, I’d ditch the js animation and just use css animation.

2 Likes
5

Hi, Thanks for the fast response @mhartington . Still something is wrong with my code. The multidimensional array structure with objects makes things go wrong.

6

Hmm, the multi-array was being problematic. But you can still create the multiple rows.

7

Hi @mhartington . Thanks a lot for the effort but this doesn’t solve my problem . I have a multi dimensional array - $scope.cards= [ [ {},{} ] ,[ {},{} ] ];

And on the template : nested ng-repeat

I have this structure to create rows with different number of columns.
For example,
row0- col 0, col1
row1-col0

Is there some way to achieve the same animation effect on this structure?

Thank you :smile:

8

@mhartington Thanks for that CSS solution, perfect for my needs!

I just wanted to ask a question, any input would be great from any of the brainy guys around.

Would one typically always prefer CSS based animations over JS? From my understanding CSS animations are less computationally expensive and produce better results on mobiles, is this true or not necessarily?

Thanks!

9

Hi @mhartington ,

With reference to codepen from you :
codepen Grid

Can you show me how to create rows with varied number of columns using single ng-repeat on a template?

For example,
row 0- with 3 columns (as on codepen)
row 1 -with 2 coulmns
row 2-with 1 coulmn.

And, as the number of coulmns change ,it should automatically stretch to occupy the full row space.

I did the same with nested ng-repeat but then I’m not able to apply ngFx animations to it.

Any help would be appreciated.

Thank you :wink:

I have the idea of using ng-if on a column element but not sure if it’s the efficient considereing performance.

10

@mhartington- grateful too for some guidance on this one
nested ng-repeats don’t seem to work with stagger.

11

Post Grid-100

I solved it this way. :wink: