角度 2 - 控制动画关键帧

Question

我正在尝试找到一种控制CSS3/角度2动画的方法。

例如，查看来自官方角度 2 动画文档中的以下代码，并进行了一些更改：

animations: [
  trigger('flyInOut', [
    state('in', style({position: 'absolute', left: '15%',bottom:'15%'})),
    transition('void => *', [
      animate(300, keyframes([
        style({opacity: 0, left: '30%', offset: 0}),
        style({opacity: 1, left: '50%',  offset: 0.3}),
        style({opacity: 1, left:'80%',     offset: 1.0})
      ]))
    ])
  ])
]

我的问题是，是否有任何方法可以使用角度 2 变量控制 css 值。一个例证是：

<animation leftPrec="15%" bottomPrec="15%" firstStep="30%" secondStep="60%" thirdStep="80%"></animation>

在动画组件中：

animations: [
      trigger('flyInOut', [
        state('in', style({position: 'absolute', left: leftPrec,bottom:bottomPrec})),
        transition('void => *', [
          animate(300, keyframes([
            style({opacity: 0, left: firstStep, offset: 0}),
            style({opacity: 1, left: secondStep,  offset: 0.3}),
            style({opacity: 1, left: thirdStep,     offset: 1.0})
          ]))
        ])
      ])
    ]

这个演示显然不起作用，并且是为了说明我想要实现的目标而编写的。

我很想听听您是否有任何关于如何实现类似目标以控制动画关键帧属性的方法或建议。

Answer 1

您现在可以使用 useAnimation(( 执行可重用的动画;

export const easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1.000)';
export const zaFade = animation([
     style({ opacity: ' {{ from }} ', transformOrigin: '50% 0%' }),
     animate('{{ time }}',
     style({ opacity: ' {{ to }} ', transform: ' {{ transform  }}' }))
], { params: { time: `1000ms ${easeInOutCubic}`, from: 1, to: 0, 
     transform: 'translateX(0)' }}
);

然后在其他地方使用动画，您可以更改默认参数。

query('button', stagger('300ms', [
          useAnimation(zaFade, { params:
              {
                time: `1000ms ${easeInOutCubic}`,
                from: '0',
                to: '1',
                transform: 'translateY(0px)'}
            }
          )
        ]), { optional: true }),