Ionic animations not working

Ionic Framework Ionic Angular
1

Hey folks,

I´ve been playing with the Ionic Animations API on a side project im working on i have been strunggling with the next piece of code:

@ViewChild('chevron', { static: false }) chevron: ElementRef;
private chevronAnimation: Animation;

constructor(private animationCtrl: AnimationController) { }

toggleDropdown() {
    this.isDropdownExpanded = !this.isDropdownExpanded;
    if (!this.chevronAnimation) {
      this.chevronAnimation = this.animationCtrl.create().addElement(this.chevron.nativeElement).fromTo('transform', 'rotate(0deg)', 'rotate(180deg)').easing('ease').duration(100);
    }
    if (this.isDropdownExpanded) {
      this.chevronAnimation.direction('reverse').play();
    } else {
      this.chevronAnimation.direction('normal').play();
    }
  }

As you can see its a simple chevron i want to rotate when user fires the method toggleDropdown. No errors, event is fired, logic works correctly but the animation isnt played.

Thanks in advice.

2

Do you have a sample or github repo we could look at?

3

I can’t because its in a private repo but I have manage to make it work.

HTML templete was like this:

<ion-icon #chevron slot="end" name="chevron-down-outline"></ion-icon>

And in the component.ts i have the following:

@ViewChild('chevron', { static: false }) chevron: ElementRef;

The error is trying to access the IonIcon with ElementRef because it only works with native elements. If i wrap the Ion-icon with a div and i give the reference to the div works perfectly.

Is there a way to use something similar to ElementRef with custom components and pass that custom component to the addElement method from Animations API?

this.animationCtrl.create().addElement(this.chevron.nativeElement).fromTo('transform', 'rotate(0deg)', 'rotate(180deg)').easing('ease').duration(100);

Thanks!

1 Like