question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@angular/animations delay passed in options parameter for transition() call has no effect

See original GitHub issue

🐞 bug report

Affected Package

The issue is caused by package @angular/animations

Is this a regression?

I don’t know, I just tried to use the AnimationOptions parameter for the first time in @angular/animations version 7.2.1

Description

I need to delay the starting of an animation, but the delay parameter of the animate() function doesn’t fit, as the start event of the animation will be fired once the trigger was activated, regardless of the delay provided in this way: animate ('duration delay easing')

In the transition() and AnimationOptions docs I came across the delay property, which is supposed to “set a time-delay for initiating an animation action”.

I was not able to observe any delay when providing the { delay: '2s' } as options parameter in my transition calls(). See stackblitz.

I depend on this behaviour, as I need to update component state, based on the animation start event, which needs to fire after the delay.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-qq6tyv

🌍 Your Environment

Angular Version:


Angular CLI: 7.2.2
Node: 10.13.0
OS: darwin x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.2
@angular-devkit/build-angular     0.12.2
@angular-devkit/build-optimizer   0.12.2
@angular-devkit/build-webpack     0.12.2
@angular-devkit/core              7.2.2
@angular-devkit/schematics        7.2.2
@angular/cli                      7.2.2
@ngtools/webpack                  7.2.2
@schematics/angular               7.2.2
@schematics/update                0.12.2
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.28.4

Angular Animations version: 7.2.1

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:8
  • Comments:10

github_iconTop GitHub Comments

4reactions
VesterDecommented, Mar 27, 2020

I would appreciate if someone took a look at this… It’s been almost a year, and I just stumbled upon it.

Seems like a straightforward feature.

1reaction
wooliesx-apirillocommented, Nov 12, 2019

This still appears to be an issue, is it being worked on?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Animation transitions and triggers - Angular
In Angular, transition states can be defined explicitly through the state() function, or using the predefined * wildcard and void states. Wildcard statelink....
Read more >
Angular animation delay not executed - Stack Overflow
I did try setting the animation delay in the styles itself, in the timings of Angular's animate function, as delay parameter in group...
Read more >
In-Depth guide into animations in Angular - InDepth.Dev
This is a guide on the available animation options and which ones to use when. These includes some basics such as animations for...
Read more >
transition-delay - CSS: Cascading Style Sheets | MDN
The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes.
Read more >
Getting Started With Animations For Angular: Fade + FadeSlide
The transition() function describes when an animation should begin playing. An expression can be passed as the first argument, and this ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found