odd wind
I have the followings in the animations array of a component:
trigger('...', [
state('off', style({ color: 'red', opacity: 0 })),
state('on', style({ color: 'green', opacity: 1 })),
transition('off <=> on', animate(500)),
])
Right now, both rules are animated at 500ms, however I'd like to animate opacity at a different time (i.e. 250ms). How do I do that?
merry musk
Try this
trigger('...', [
transition('off <=> on', animate(500), keyframes([
style({ color: 'red', opacity: 0 }),
style({ opacity: 1, offset: 0.5 }),
style({ color: 'green' })
])),
])
Are we skipping states? Or have you just put the transition part in here?
merry musk
Did you try that?
odd wind
Did you try that?
Type 'AnimationKeyframesSequenceMetadata' has no properties in common with type 'AnimationOptions'.
merry musk
trigger('...', [
transition('off <=> on', [
animate('500ms', keyframes([
style({ color: 'red', opacity: 0 }),
style({ opacity: 1, offset: 0.5 }),
style({ color: 'green' })
]))
]),
])
Error: NG03404: The animation trigger "..." has failed to build due to the following errors:
- NG03200: Please ensure that all keyframe offsets are in order
- NG03202: Not all style() steps within the declared keyframes() contain offsets
trigger('...', [
transition('off <=> on', [
animate('500ms', keyframes([
style({ color: 'red', opacity: 0, offset: 0 }),
style({ opacity: 1, offset: 0.5 }),
style({ color: 'green', offset: 1 })
]))
]),
])
It's not giving me the desired effect. I guess we're on "trial 'n' error" mode, so I'll continue digging into other articles and tutorials on it.
merry musk
Animations in angular qre quite tricky, and at the moment I got no way to test, I can only suggest code out of my mind.
What exactly does not work as you'd like?
odd wind
Animations in angular qre quite tricky, and at the moment I got no way to test, ...
It's making the element fully opaque first, then changing the color.
Okay I think I described it the other way around. I meant to make the opacity take 2x longer to get to 1. So your code works as intended. Sorry, my bad. 😛
merry musk
Do you mean that at half transition colour should have completed changing, while opacity should take 500ms?
odd wind
Do you mean that at half transition colour should have completed changing, while...
All the styles in the states should take 0.5s, while only opacity should take 2x longer to finish.
In my actual app, there are other styles too, I just kept it short here.
merry musk
trigger('...', [
transition('off <=> on', [
animate('1s', keyframes([
style({ color: 'red', opacity: 0, offset: 0 }),
style({ color: 'green', offset: 0.5 }),
style({ opacity: 1, offset: 1 })
]))
]),
])
I suspect the effect you want cannot be symmetric, so you need to split your bidirectional transition into two unidirectional ones.
odd wind
I suspect the effect you want cannot be symmetric, so you need to split your bid...
You're right. This seem to work for off => on. So for on => off, I need it to be in reverse.
merry musk
trigger('...', [
transition('off => on', [
animate('1s', keyframes([
style({ color: 'red', opacity: 0, offset: 0 }),
style({ color: 'green', offset: 0.5 }),
style({ opacity: 1, offset: 1 })
]))
]),
transition('on => off', [
animate('1s', keyframes([
style({ color: 'green', opacity: 1, offset: 0 }),
style({ color: 'red', offset: 0.5 }),
style({ opacity: 0, offset: 1 })
]))
]),
])
Almost! opacity should go with offset: 0.5, and color with offset: 1. I got it. Thanks for the written code.
So keyframes was the magic wand here... 👌
merry musk
Animating style directly is like having just offset: 0 and offset: 1.
If you need to differentiate properties transition, or simply don't want it be linear, you need to specify intermediate frames.
(For the latter you can use easing too, but it was not your case).
odd wind
Animating style directly is like having just `offset: 0` and `offset: 1`.
If you...
The doc is extremely compact regarding these cases. Do you have any good materials from where I can learn more?
merry musk
Unfortunately is a really confusing topic.
Can't suggest any specific.