具有连字符属性的Angular 2关键帧动画

发布时间：2020-12-17 17:00:27 所属栏目：安全来源：网络整理

导读：我正在尝试在我的组件上重新创建此动画： https://github.com/daneden/animate.css/blob/master/source/zooming_exits/zoomOutUp.css 我找不到在关键帧上使用缓动的任何示例.我能看到的唯一缓和示例是单步,它通过传入一个字符串而不是动画持续时间的数字,即

我正在尝试在我的组件上重新创建此动画： 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,因为它详细介绍了这一点.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!