ngRepeat animation (feature)

[Daniel]

Is there any possible way to animate the elements that we are adding on a ngRepeat?

I found 2 ways:
A) Adding the classes directly on the tag with the ngRepeat. This is the easiest one but not really functional because we will animate it every time we come back to this view and we have no control over this
B) Adding hidden on the ngRepeat and every time we add one element we add a .show() but doesn't work properly. Maybe because sometimes the animation goes faster than the html and the content doesn't exist yet.

I was thinking on a tag property because this should be managed from the html if I'm not wrong.

[Fabian Leutgeb]

Did you try with the directive provided by css-animator?

[Daniel]

Oh that's perfect, thanks for pointing me out!

What about to removing the element? It works fine when I add it but not when I remove it.
Maybe using a event different to animatesOnInit right?

[Fabian Leutgeb]

I have just added [animatesOnDestroy] and animatesDestroyMode on the directive, and published v2.3.0-beta.4 via css-animator@next. I didn't have time to test - can you try if this works?

[Fabian Leutgeb]

When thinking about it, i tend to say this won't work, as Angular may remove the DOM element before the animation can finish, as the animation builder uses asynchronous code.

[Daniel]

I get this issue adding [animatesOnDestroy]="{ type: 'slideInRight' }" to my tag:

Error: Template parse errors:
Can't bind to 'animatesOnDestroy' since it isn't a known property of 'ion-item'.
1. If 'ion-item' is an Angular component and it has 'animatesOnDestroy' input, then verify that it is part of this module.
2. If 'ion-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("es #animation="animates" animatesInitMode="show"
        [animatesOnInit]="{ type: 'slideInLeft' }" [ERROR ->][animatesOnDestroy]="{ type: 'slideInRight' }" (click)="animation.start()">
        <!-- <div content"): ng:///AppModule/TeamsPage.html@19:51
    at syntaxError (http://localhost:8100/build/vendor.js:89823:34)
    at TemplateParser.parse (http://localhost:8100/build/vendor.js:113998:19)
    at JitCompiler._parseTemplate (http://localhost:8100/build/vendor.js:123809:37)
    at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:123784:23)
    at http://localhost:8100/build/vendor.js:123685:62
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:123685:19)
    at http://localhost:8100/build/vendor.js:123555:19
    at Object.then (http://localhost:8100/build/vendor.js:89812:77)
    at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:123554:26)

But as you said we might have some issues with the performance.

I'd suggest maybe when we click on "Remove" button something like this:

this.animator.setType('animation').hide(element).then(() => {
  // remove element of the list
});

[Fabian Leutgeb]

Are you on css-animator@next for testing this? I might have to look into this again, however, I just started working on the next major version, where this feature may be implemented.

[Daniel]

Hmmm, maybe I wasn't. I installed that version but maybe without @next. But anyway, there is no rush... Even less if you are working on this.

I also found that Ionic has some style issues when you try to animate an ion-list element with below elements.

Just give me a shout when you have this implemented on latest version and I'll do some testing with Ionic-mobile.