AnimationPlayer.getPosition always returns zero

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

AnimationPlayer.getPosition() always returns 0

Expected behavior

getPosition() should return the current 0% of the animation inferred in the API docs

Minimal reproduction of the problem with instructions

Create an Animation programatically such as:


createAnimation(){
  let a = this._builder.build([
    animate('1000ms', keyframes([
      style({ transform: 'translate3d(0px, 0px, 0px)', offset: 0.0 }),
      style({ transform: 'translate3d(100px, 0px, 0px)', offset: 1.0 }),
    ]))
  ]);
  this.animationPlayer = a.create(this.domNode);
  this.animationPlayer.play();
  setTimeout(this.pauseAnimation.bind(this), 500);//half animation time
}

pauseAnimation(){
  this.animationPlayer.pause();
  console.log(this.animationPlayer.getPosition());//excepting ~50 to be printed
}

Live example

Environment


Angular version: 4.3.6
@angular/cli: 1.3.2

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.1.4
- Platform:  Mac

I can confirm this behavior, however this is how the method is written as of now: https://github.com/angular/angular/blob/4.3.6/packages/animations/src/players/animation_player.ts#L93

Same goes for the totalTime property, which is set to 0 and never changes.

👎 Is there a timeline for when this functionality is going to be implemented?

-Matt

Any updates on this?

i have found a way to hack this

      const myAnimation = this._builder.build(this.data.animations);
      let player = myAnimation.create(this._viewRef.element.nativeElement);

      // >>>>>>> next line needed <<<<<< 
      this.player = player._renderer.engine.players[player._renderer.engine.players.length - 1];

      this.player.onStart(() => console.log('started'))
      this.player.onDone(() => console.log('done'))
      this.player.init();

It seems that this is not done yet.
Angular repo:
https://github.com/angular/angular/blob/master/packages/animations/src/players/animation_player.ts

getPosition(): number { return 0; }

We'll have to wait.

At the very least, the documentation should be updated to note that the method does not work. Nothing's more frustrating than debugging your code only to find that the method is not implemented yet!

I would love to see this feature implemented. There is pretty big value in being able to get an idea of where we sit in the animation timeline.

Any update on the issue? It has been 2 years since this bug has been discovered.

Bug from three years ago🤪

https://github.com/angular/angular/blob/master/packages/platform-browser/animations/src/animation_builder.ts

@literalpie

Hi folks, the fix for this issue (#39983) has landed in 11.0.4, thanks to @literalpie.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

AnimationPlayer.getPosition always returns zero #18891

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

AnimationPlayer.getPosition always returns zero #18891

Description

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

Environment

Activity

Sebastien-Guillon commented on Aug 29, 2017

cutty201 commented on Sep 1, 2017

dimitarrusev commented on Mar 25, 2018

soonwait commented on May 9, 2018

SantiagoIlli commented on Dec 10, 2018

literalpie commented on Jan 19, 2019

tabuckner commented on Aug 30, 2019

JoJk0 commented on Apr 17, 2020

xiaojundebug commented on Jun 8, 2020

JoostK commented on Dec 9, 2020

angular-automatic-lock-bot commented on Jan 9, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions