Animations not working with shake


#1

Hello,

I have a problem using the Shake plugin ( https://ionicframework.com/docs/native/shake/ ) in my Ionic Application for an iOS and Android 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?