I am using Angular 4 in a cli web dev environment to make svg animations. I
am having lots of trouble trying to specify an animation timeline.
If I use state transitions, I don't seem to be able to use query to grab
elements from my svg by class so I can animate each element individually
and I don't know how to trigger on component Init, but if I use query, I am
limited to using keyframes to control timing, which is unreliable.
I also don't seem to be able to start with all my svg elements offscreen.
In the following code, I want to start with all my svg classes offscreen
when the page loads, then carry out each animation in sequence. Can anybody
help?
animations: [
trigger('myAwesomeAnimation', [
transition(':enter', group([
query('.IsEverything', style({transform: 'translateY(-500%)'})),
query('.DoesAll', style({transform: 'translateX(500%)'})),
query('.IfYou', style({transform: 'translateX(-500%)'})),
query('.ICant', style({transform: 'translateX(-500%)'})),
query('.MelanieFreshness', style({transform: 'translateX(-500%)'})),
query('.AintNobody', style({transform: 'translateY(500%)'})),
query('.IsEverything', group([
animate('2000ms 2000ms', keyframes([
style({ transform: 'translateY(-500%)', offset: 0}),
style({ transform: 'translateY(0)', offset: 0.25 }),
style({ transform: 'translateX(0)', offset: 0.5 }),
style({ transform: 'translateY(-500%)', offset: 0.75 }),
]))
])),
query('.DoesAll', group([
animate('2000ms 4000ms', keyframes([
style({ transform: 'translateX(0)', offset: 0.25 }),
style({ transform: 'translateX(0)', offset: 0.5 }),
style({ transform: 'translateX(500%)', offset: 0.75 }),
]))
])),
query('.IfYou', group([
animate('2000ms 6000ms', keyframes([
style({ transform: 'translateX(0)', offset: 0.25 }),
style({ transform: 'translateX(0)', offset: 0.5 }),
style({ transform: 'translateX(-500%)', offset: 0.75 }),
]))
])),
query('.ICant', group([
animate('2000ms 8000ms', keyframes([
style({ transform: 'translateX(0)', offset: 0.25 }),
style({ transform: 'translateX(0)', offset: 0.5 }),
style({ transform: 'translateX(-500%)', offset: 0.75 }),
]))
])),
query('.MelanieFreshness', group([
animate('2000ms 10000ms', keyframes([
style({ transform: 'translateX(0)', offset: 0.25 }),
style({ transform: 'translateX(0)', offset: 0.5 }),
style({ transform: 'translateX(-500%)', offset: 0.75 }),
]))
])),
query('.AintNobody', group([
animate('2000ms 1000ms', keyframes([
style({ transform: 'translateY(0)', offset: 0.25 }),
style({ transform: 'translateX(0)', offset: 0.5 }),
style({ transform: 'translateY(500%)', offset: 0.75 }),
]))
])),
]))
])
],
--
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.
