Parameters inside stagger() don't work

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

When using an animation parameter inside stagger like stagger('{{ delay }}', [ the animation fails, because the parameter is not replaced.

Expected behavior

Parameters work inside stagger timings as well

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/SqrTDLrYKNaL8hTYHESj?p=preview
Create a stagger animation with an parameter inside the staggers timing

What is the motivation / use case for changing the behavior?

Parameter replacement works on other timing properties, it should work in stagger as well.

Environment


@angular/cli: 1.4.2
node: 8.2.1
os: darwin x64
@angular/animations: 4.4.5
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.5
@angular/compiler: 4.4.5
@angular/core: 4.4.5
@angular/flex-layout: 2.0.0-beta.9
@angular/forms: 4.4.5
@angular/http: 4.4.5
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.5
@angular/platform-browser-dynamic: 4.4.5
@angular/router: 4.4.5
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.5
@angular/language-service: 4.4.5
typescript: 2.3.4


Browser:
- [x] Chrome (desktop) version 61.0.3163.100
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 57.0b8
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

@matsko

Hi, can you link to a plunkr online demo?

@matsko is this a known issue?

@manekinekko

I added a plunkr @manekinekko
Hope it's sufficient

Thank you for bringing this up. I will get to a fix shortly.

it's me or this not working :

 trigger('ngIfAnimation', [
      transition(':enter, :leave', [
        query('@*', animateChild())
      ])
    ]),
    trigger('easeInOut', [
      transition('* => *', [ // each time the binding value changes

        query(':enter', [
          style({ opacity: 0 }),
          stagger(100, [
            animate('0.5s', style({ opacity: .5 }))
          ])
        ])
      ])
    ])
  ]

then in template simply use @easeInOut

Hi,

Parameters inside stagger() don't work.

When it would be fixed ?
The problem still persist.

Thank's

super sad sad face

The entire Angular framework is on one side from being intuitive and reusable and simplicity and animation API is on another side. so so so unintuitive and unnecessarily complicated and weird. It's trying to follow functional programming while passing strings around as animation and I have to always look for examples because the docs make no sense and it's super tiring to read to be able to just create a simple fade animation with a variable passed in.
I'm sure even in Google devs try to avoid using it and resort to CSS animations instead.
What a disaster.
It's been 5? years since I started using Angular2, and my experience with animations API has been nothing but pain.
Can't believe it's been 5ish years since this API was announced, and it still does not support variables, wtf. That's like the most fundamental feature any animation library provides. 5 years

@xe4me

@xe4me I won't say that it doesn't have positives but for some reason I feel like animations isn't part of Angular, it's like a whole new language that I have to learn and a whole new way of thinking, so it ads extra learning curve.

@xe4me

@xe4me,

I'm sure even in Google devs try to avoid using it and resort to CSS animations instead.

Please keep your personal peeves out of this discussion. Angular animations is powerful and provides a ground for creating animations outside the scope of CSS. Even if its syntax is on the complex side (and you're welcome to suggest a better one), its still learnable and is highly useable (I use it incessantly in enterprise level apps).

Can't believe it's been 5ish years since this API was announced, and it still does not support variables

This is a grossly wrong statement. Variables are supported, and they work well. If you read this issue properly you'd realize that people ask for animations parameters would be supported inside stagger() function too, which currently they are not.

That's like the most fundamental feature any animation library provides.

Variables are not are not fundamental to "any animation library". Most frameworks provide APIs to create CSS animations. Angular animates DOM elements with timers, and not many frameworks provide this OTB.

fix(animations): fix stagger timing not handling params (#47208)

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

Parameters inside stagger() don't work #19786

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Parameters inside stagger() don't work #19786

Description

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Activity

manekinekko commented on Oct 18, 2017

heddendorp commented on Oct 18, 2017

matsko commented on Oct 23, 2017

elvisbegovic commented on Oct 24, 2017

artsys78 commented on Apr 19, 2018

sublimator commented on Apr 23, 2018

4 remaining items

xe4me commented on Aug 13, 2019

tayambamwanza commented on Aug 13, 2019

AsafAgranat commented on Aug 14, 2019

angular-automatic-lock-bot commented on Sep 22, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions