Animations not working if component is included in multiple pages

@Blamax wrote:

Hello together!

I have a DayInfoComponent showing calendar-data of Persons. With a little toggle, I make detailed information visible. A simplified version:

export class DayInfoComponent implements OnInit {
....

  constructor(
    private animationCtrl: AnimationController,
  ) {}

if(this.visible == true){
        var selector = 'ion-grid[id="' + some_id + '"]';
        var elem = document.querySelector(selector);
        var height = elem.scrollHeight;
        const animation_show = this.animationCtrl
          .create("show" + this._time.toString())
          .addElement(elem)
          .duration(300)
          .iterations(1)
          .fromTo("height", "0px", height + "px");
        animation_show.play();
      } else {
        var selector = 'ion-grid[id="' + some_id + '"]';
        var elem = document.querySelector(selector);
        var height = elem.scrollHeight;
        const animation_hide = this.animationCtrl
          .create("hide" + this._time.toString())
          .addElement(elem)
          .duration(300)
          .iterations(1)
          .fromTo("height", height + "px", "0px");
        animation_hide.play();
      }
}

I include the DayInfoComponent in multiple pages. Whereas the animation of the toggle works without problems in the first page I load, the animation does nothing in the second page with the component.

I tried to debug with Chrome DevTools Animation Inspector. The animations are triggered, but they dont have any effect in the second page. Any ideas how to debug that?

Thanks in advance!

Blamax

Posts: 1

Participants: 1

Read full topic