4

我正在尝试在我的组件上重新创建此动画：https ://github.com/daneden/animate.css/blob/master/source/zooming_exits/zoomOutUp.css

我找不到任何在关键帧上使用缓动的例子。我能看到的唯一缓动示例是单个步骤，它通过在动画持续时间中传入字符串而不是数字来工作，即animate(1s 1s ease).

添加带有连字符的属性并使用关键帧进行缓动的正确方法是什么？

该文档只有几个属性，所以我什至不确定这是否以正确的方式进行，但它似乎有效，但我认为它实际上可能没有使用指定的缓动和变换原点。

这是我尝试过的：

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
        })
    ]))
])

它可以工作，但看起来不像 animate.css 动画。我不认为它需要所有设置。

这样做的正确方法是什么？

4

1 回答 1

0

如评论中所述，您将使用驼峰式大小写（即：transformOrigin）而不是连字符，因为这是 JavaScript 可以理解的。

此外，听起来您需要利用状态来实现所需的缓动动画效果。定义状态后，您可以定义状态之间的转换。每个过渡控制在一组样式和下一组样式之间切换的时间：

transition('inactive => active',
animate('100ms ease-in')),
transition('active => inactive',
animate('100ms ease-out'))

查看Angular2 动画文档，因为它对此进行了详细介绍。

于 2017-03-31T03:22:19.563 回答