Angular Animation not Working

[davidgear]

Hello,

I have a problem using this plugin in my Ionic Application for an iOS App.

I want a transform-animation ( transform: 'rotateY(180deg)' ) to start when device is shaken.
The animation works perfectly when triggering it by a click or by itself after waiting like 2 seconds.

I have a method, which changes the variable to trigger the animation:

@Component({
...
animations: [
    trigger('state', [
      state('active', style({
        transform: 'rotateY(180deg)'
      })),
      transition('* => active', animate('400ms ease'))
    ])
  ],
...
})

export class MyComponent {

  constructor( private shake: Shake, private platform: Platform ){
    if( this.platform.ready() === 'cordova' ){
      this.shake.startWatch(40).subscribe( () => this.toggleState() );
    }
  }

  toggleState() {
    this.state = this.state === 'inactive' ? 'active' : 'inactive';
  }

}

So by shaking my iPhone I get correct outputs in the Xcode debug console and the state-variable changes from inactive to active, but the rotateY-animation will not be shown.
By clicking a button with (click)="toggleState()" property, everything works perfectly.

Can anybody help me?

[abdel-ships-it]

this.platform.ready() will never equal cordova... Because it returns a promise. So your shake listener is never set.