Hi there.
I have a stagger animation triggering for a children array of a JSON tree
structure causing them to ease in.
Plus I have a further animation if one of these changes their class; then
their background-color is changed.
Now, if the second animation is triggered during the first one, there is a
huge “bug”/“mess”:
The color is changed but after the first animation is finished it resets to
the init color.
ALTHOUGH the css says it should have background-color:green it just stays
grey.
Does anyone have an idea?
*app-tree-node Component typescript:*
trigger('changeVerdict', [
transition('* => *', animate('1000ms ease-in')),
state('fail', style({
backgroundColor: '#D89292'
})),
state('pass', style({
backgroundColor: '#9DDE9D'
})),
state('toverify', style({
backgroundColor: '#FECE75'
})),
state('blocked', style({
backgroundColor: '#962421'
})),
state('skipped', style({
backgroundColor: '#FFFFFF'
})),
state('undefined', style({
backgroundColor: '#BFBFBF'
}))
// transition('fail => pass', animate('1000ms ease-out')),
// transition('pass => fail', animate('1000ms ease-in')),
]),
trigger('createNodes', [
transition('* => *', [
query('.verdict', style({ opacity: 0 })),
query('.verdict',
stagger(200, [
animate('600ms ease-in', style({ opacity: 1 }))
]))
// query('@changeVerdict', [
// animateChild()
// ], { optional: true })
])
])
*app-tree-node Component html:*
<div
*ngIf="treeModel.verdict"
class="verdict"
[ngClass]="parseToTrimmedLowerCase(treeModel.verdict)"
[@changeVerdict]="parseToTrimmedLowerCase(treeModel.verdict)">
</div>
<ol *ngIf="treeModel.children" [@createNodes]="treeModel.children.length">
<!-- (@createNodes.done)="fadeDone($event) -->
<li *ngFor="let child of treeModel.children">
<app-tree-node [treeModel]="child"></app-tree-node>
</li>
</ol>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
