0

我正在尝试找到一种控制 CSS3/角度 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})
          ]))
        ])
      ])
    ]

该演示显然无法正常工作，并且是为了说明我想要实现的目标而编写的。

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

4

1 回答 1

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 }),
于 2017-11-05T13:31:22.150 回答