undefined this.animator

[Daniel]

I have done everything as explained on README but I can't get this working because this.animator is always undefined and this.animator.setType troughs an error.

I imported on app.modules.ts:
import { AnimatorModule } from 'css-animator';

and on my component:
import { AnimationService, AnimationBuilder } from 'css-animator';

[Fabian Leutgeb]

Can you please show me where you are defining the module and where you are using this.animator?

[Daniel]

The module is loaded as commented on my general app.modules.ts and on my component I use the this.animator like this:

private animator: AnimationBuilder;

constructor(animationService: AnimationService, public navParams: NavParams) {}

doAnimation() {
    let loadingElem = document.getElementById('sum'); // my element

    console.log(this.animator); // this is always undefined...
    // this.animator.setType('fadeInUp').show(loadingElem); // ...so this doesn't work
  }

[Fabian Leutgeb]

You are missing the assignment in the constructor:

private animator: AnimationBuilder;

constructor(animationService: AnimationService) {
  this.animator = animationService.builder(); // <-- this is required when injecting the service
}

Alternatively you could omit injecting the service in the constructor and create the AnimationBuilder instance manually:

private animator = new AnimationBuilder();

[Daniel]

Oh, I see... my fault mate, didn't see that.

Ok, now this.animator has a value but when I click the button can't see anything. If I click again I get this issue: Uncaught (in promise): animation_aborted

I'm trying also with this way:

this.animator
        .setDuration(600)
        .setType('fadeOut')
        .hide(loadingElem)
        .then(() => {
          alert('finished');
        });

[Daniel]

First time I click it does something like a flickr, but nothing else, even changing the method

[Fabian Leutgeb]

Which browser and Angular version are you using? Can you provide a minimal working example?

[Daniel]

I'm using Angular with Ionic (3.6) and testing on Chrome but I'm pretty sure that the problem is mine, I'm quite new with Angular 4.

Something that I didn't see on the README was this import:
import { ElementRef } from '@angular/core';

I tried also pointing to my element with this way, but same problem:
this.elementRef.nativeElement.childNodes[0] (this is the header)

I'm investigating now about ElementRef, TemplateRef, ViewRef... but can't find the issue. Pretty sure the problem is around this.

About the working example, my view is just that, a button with that function.

[Daniel]

Can't find any issue related with ElementRef, it's being used properly. Following the last approach (more info: https://stackoverflow.com/questions/38944725/how-to-get-dom-element-in-angular-2).

So with this code I get this output (the result is the one commented above):

this.animator.setType('fadeOut').show(this.keyboard.nativeElement);
console.log(this.keyboard.nativeElement);

This happens when I click twice (waiting some time between clicks):

So getting this info properly I can say the problem is not related with ElementRef

I've created a repo (I understand it's going to be a bit tricky without demo) with this example. Just clone, run npm install, install also Ionic and run ionic serve.
You'll see a button on right corner.
https://github.com/erperejildo/temporary

[Fabian Leutgeb]

Thanks for providing a demo! I just had a glance at your example and I think you didn't include animate.css. You can use any CSS animation with this library, as setType actually applies a class on the HTML element. However, if no corresponding CSS class is defined that holds the animation, you won't see anything and on the second click the animation of the first click is interrupted which will never trigger a finished event.

I am considering not to reject the promise when animations are interrupted or replaced for the next version of css-animator. In the meantime you may want to have a look at #15 (comment) where you can see how to globally handle the animation_aborted exception.

I didn't run your example yet. Probably try to add animate.css and let me know if it solves your issue. If not, I'll have a closer look.

[Daniel]

Oh, I see. I thought it was loaded properly as long as I could run animationService.builder(); on my controller.

I'm reading the README again but can't find any references related with animate.css importing.
I included this but doesn't work: <link href="animate.min.css" rel="stylesheet">
Had a look to the node_module folder and css-animator doesn't have any css file.

[Daniel]

I tried cloning this project: https://github.com/fabiandev/angular2-quiz-app
But when I run npm install on that one I see on my node_modules folder animate.css folder.

On my project the only one I found is css-animator

[Fabian Leutgeb]

In section Usage of the readme it suggests the following to install css-animator:

yarn add css-animator animate.css

This will install the dependencies css-animator and animate.css.

You did not install animate.css in your example project, which you may want to add with npm:

npm install animate.css --save

You can use the --save-dev flag instead of --save to install it as a dev dependency.

As already mentioned, animate.css is not a hard dependency, since this library works with any CSS animation. It is just a popular package that provides an extensive collection of animations, and therefore is used in the examples of css-animator.

[Daniel]

I'm a bit lost to be honest.

Let's talk about a blank project. In order to use this lib what command do I need to run?
npm install --save css-animator
or
yarn add css-animator animate.css

[Fabian Leutgeb]

Yarn is just a package manager like npm, you can use either. If you are using npm, the following command can be used:

npm install --save css-animator animate.css

Now in your main sass file, which is src/app/app.scss in your case, inline the animate.css file:

@import "~animate.css/animate";

If the import above doesn't work (see ionic-team/ionic-app-scripts#847), you can try the following:

@import "../../node_modules/animate.css/animate";

[Daniel]

Perfect, that was the problem then, needed to install it with animate.css, otherwise doesn't work.
Still getting the callback problem but can fix it with the link you shared.

Thanks!

[Daniel]

@fabiandev I created a new project with just Angular 6 and I had to come to this post to see how to fix it.

Better moving this info to the README

[Fabian Leutgeb]

Will add this to the readme soon, thanks for flagging.