Animations: transition doesn't support true/false values when the trigger is a boolean

[JohnKis]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature 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 animation on a component with a boolean trigger, setting a transition from 'false => true' won't do the transition. If you set it to '0 => 1' the transition will work fine.

Expected behavior
When using animation on a component with a boolean trigger, setting a transition from 'false => true' should do the specified transition.

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/dVVesfq6TCiOclwxRSgf

What is the motivation / use case for changing the behavior?
Since state supports 'true' and 'false' values, for the sake of consistency transition should support them as well.

Please tell us about your environment:
macOS Sierra, NPM

• Angular version: 2.0.1
• Browser: all
• Language: TypeScript 2.0.3
• Node (for AoT issues): node --version = v6.3.0

[rolandoldengarm]

This was working in Angular 2.4.
I can confirm that this issue is back in Angular 4.0.1...

[MitchTalmadge]

I can also confirm that it is broken in 4.0.1.

These do not work:

animations: [
    trigger('alertDisplayed', [
        state('true', style({opacity: 1})),
        state('false', style({opacity: 0, margin: 0, padding: '0 15px'})),
        transition('true => false', animate('200ms')),
        transition('false => true', animate('200ms'))
    ])
]

animations: [
    trigger('alertDisplayed', [
        state('true', style({opacity: 1})),
        state('false', style({opacity: 0, margin: 0, padding: '0 15px'})),
        transition('1 => 0', animate('200ms')),
        transition('0 => 1', animate('200ms'))
    ])
]

This does work:

animations: [
    trigger('alertDisplayed', [
        state('1', style({opacity: 1})),
        state('0', style({opacity: 0, margin: 0, padding: '0 15px'})),
        transition('1 => 0', animate('200ms')),
        transition('0 => 1', animate('200ms'))
    ])
]

[rynomster]

This is kind of related:
https://github.com/angular/angular/blob/master/packages/animations/src/animation_metadata.ts#L678
The documentation says we can provide a function fort the transition, but it doesn't allow the expression.

[angular-automatic-lock-bot]

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.}