在Angular 2.我如何動畫到某個運行時值？

在Angular 2中，我想將某個絕對定位元素設置爲某個運行時值（只要數據填充完畢）。我怎麼做？我可以更改代碼中的狀態設置嗎？（？或一些回調）在Angular 2.我如何動畫到某個運行時值？

@Component({ 
    animations: [ 
     trigger('blahState', [ 
     state ('closed', style({ top: '0px'})), 
     state ('open', style({ top: ??? (<= must be the position of some dom element) })), 
     transition('closed => open', animate('500ms ease-in'))]) 
     ] 
})

來源

2017-01-11 dick Verweij

你是什麼意思'必須是某個dom元素的位置？ – micronyks

頁面中HTML元素的y位置。例如offsetTop。這個位置是由數據改變..

***dynamic content***

，我需要動畫來#myElement –

的位置，然後怎麼樣#myElement？ – micronyks

您可以在組件類改變 '國家'：

例如：

組件模板：

<div [@blahState]="my_animation_state"></div>

和組件類：

export MyComponent{ 
    public my_animation_state:string = 'open'; 
    toggleState() { 
     this.my_animation_state == 'open' ? 'closed' : 'open'; 
    } 
    }

，當你從「封閉」到「開放」狀態改變，你會得到過渡

transition('closed => open', ...

最後一件事，你可以調用事件時，動畫結束或開始：

<div [@blahState]="my_animation_state" (@blahState.done)="animationDone()" (@blahState.start)="animationStart()></div>

和你的組件等級：

animationStart() { 
// your code 
} 

animationDone(){ 
// your code 
}

祝你好運！

來源

2017-01-11 14:40:54 YairTawil

這不是我的問題。但也許它可以在animationStart中完成..我可以在特定時間更改動畫的值嗎？ –

創建後不能更改組件動畫。正如不可能改變'selector'。如果我以某種方式幫助你這將是很好的，你給的反饋:) – YairTawil

在Angular 2.我如何動畫到某個運行時值？

回答

相關問題