我正在尝试在我的组件上重新创建此动画：
https://github.com/daneden/animate.css/blob/master/source/zooming_exits/zoomOutUp.css
我找不到在关键帧上使用缓动的任何示例.我能看到的唯一缓和示例是单步,它通过传入一个字符串而不是动画持续时间的数字,即动画(1s 1s轻松)来工作.
文档只有一些属性,所以我甚至不确定这是否以正确的方式进行,但它似乎工作但我认为它可能实际上并没有使用指定的缓动和转换原点.
这是我试过的：
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,'transform-origin': 'center bottom','animation-timing-function': 'cubic-bezier(0.175,0.885,0.320,1)',offset: 1
})
]))
])
它工作但它看起来不像animate.css动画.我不认为这是采取所有设置.
这样做的正确方法是什么？
解决方法
正如评论中所提到的,您将使用驼峰大小写(即：transformOrigin)而不是连字符,因为这是JavaScript所理解的.
此外,听起来您需要利用状态来实现所需的缓动动画效果.定义状态后,可以定义状态之间的转换.每个转换控制在一组样式和下一个样式之间切换的时间：
transition('inactive => active',animate('100ms ease-in')),transition('active => inactive',animate('100ms ease-out'))
请看一下Angular2 Animation Documentation,因为它详细介绍了这一点.
