36d25f2a07
It is now possible to set a fallback state that will apply its
styling when the destination state is not detected.
```ts
state("*", style({ ... }))
```
Closes #9013
40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import {AUTO_STYLE, Component, trigger, state, animate, transition, style} from '@angular/core';
|
|
|
|
@Component({
|
|
selector: "animate-cmp",
|
|
animations: [
|
|
trigger('openClose', [
|
|
state("*", style({ height: AUTO_STYLE, color: 'black', borderColor: 'black' })),
|
|
state('closed, void',
|
|
style({ height:"0px", color: "maroon", borderColor: "maroon" })),
|
|
state('open',
|
|
style({ height: AUTO_STYLE, borderColor:"green", color:"green" })),
|
|
transition("* => *", animate(500))
|
|
])
|
|
],
|
|
template: `
|
|
<button (click)="setAsOpen()">Open</button>
|
|
<button (click)="setAsClosed()">Closed</button>
|
|
<button (click)="setAsSomethingElse()">Something Else</button>
|
|
<hr />
|
|
<div @openClose="stateExpression">
|
|
Look at this box
|
|
</div>
|
|
`
|
|
})
|
|
export class AnimateCmp {
|
|
stateExpression:string;
|
|
constructor() {
|
|
this.setAsClosed();
|
|
}
|
|
setAsSomethingElse() {
|
|
this.stateExpression = 'something';
|
|
}
|
|
setAsOpen() {
|
|
this.stateExpression = 'open';
|
|
}
|
|
setAsClosed() {
|
|
this.stateExpression = 'closed';
|
|
}
|
|
}
|