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 - 控制動畫關鍵幀

回答

相關問題