Angular 2 - 控制动画关键帧答案

【问题标题】：Angular 2 - controlling animation keyframesAngular 2 - 控制动画关键帧
【发布时间】：2017-11-05 21:31:22
【问题描述】：

我正在尝试找到一种方法来控制 CSS3/angular 2 动画。

例如，查看官方 angular 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})
      ]))
    ])
  ])
]

我的问题是，是否有任何方法可以使用 angular 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})
          ]))
        ])
      ])
    ]

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

如果您对如何实现类似的东西以控制动画关键帧属性有任何方法或建议，我很想听听。

【问题讨论】：

目前的 Angular 动画 api 似乎无法做到这一点。但是这个答案可能会为您提供有用的解决方法：stackoverflow.com/a/39463660/2025271

标签： angular angular2-animation

【解决方案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 }),

【讨论】：