Angular 2 keyframe animations with hyphenated properties
I am trying to recreate this animation on my component: https://github.com/daneden/animate.css/blob/master/source/zooming_exits/zoomOutUp.css
I can't find any examples of using keyframe decay. The only lighter example I see is one step and it works by passing a string instead of a number for the duration of the ie animation animate(1s 1s ease)
.
What is the correct way to add properties that have hyphens in them and ease with keyframes?
There are only a few properties in the docs, so I'm not even sure if this is correct, but it seems to work, but I think it might not actually use the above simplification and conversion.
This is what I tried:
transition('* => unloaded', [
animate(1000, keyframes([
style({
opacity: 1,
transform: 'scale3d(.475, .475, .475) translate3d(0, 60px, 0)',
'animation-timing-function': 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',
offset: 0.4
}),
style({
opacity: 0,
transform: 'scale3d(.1, .1, .1) translate3d(0, -2000px, 0)',
'transform-origin': 'center bottom',
'animation-timing-function': 'cubic-bezier(0.175, 0.885, 0.320, 1)',
offset: 1
})
]))
])
It works, but it doesn't look like animate.css animation. I don't think it accepts all settings.
What is the correct way to do this?
source to share
As mentioned in the comments, you will use the camel case (i.e. transformOrigin) instead of the hyphen, since that's what JavaScript understands.
Also, it looks like you need to use states to achieve the desired fade animation effects. After defining states, you can define transitions between states. Each transition controls the time to switch between one set of styles and the next:
transition('inactive => active',
animate('100ms ease-in')),
transition('active => inactive',
animate('100ms ease-out'))
Take a look at the Angular2 Animation Documentation as it goes into detail on this.
source to share