Angular 2 - 控制动画关键帧

我试图找到一种方法来控制CSS3/angular 2动画。Angular 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}) 
      ])) 
     ]) 
     ]) 
    ]

这个演示显然没有工作，为了说明书面我想要实现的。

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

来源

2017-03-27 TheUnreal

看来，这是不可能与当前的Angular动画api。但是，此答案可能会为您提供有用的解决方法： http://stackoverflow.com/a/39463660/2025271 – ktsangop

您现在可以使用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-05 13:31:22 Zuriel

Angular 2 - 控制动画关键帧

回答

相关问题