角度。動畫撓性元件

Question

你好。我有一個小部件，看起來像這樣：

當點擊搜索它變成：

在標記有兩個flex元素：用於報頭（flex: 1）並用於搜索。在搜索單擊我隱藏第一個和擴展第二個。現在我想讓過渡動畫。

我開始用動畫頭元素。首先，我試過動畫width：

transition(':enter', [ 
    style({width: 0, 'max-width': 0}), 
    animate(500, style({width: '*', 'max-width': '*'})), 
]), 
transition(':leave', [ 
    style({width: '*', 'max-width': '*'}), 
    animate(500, style({width: 0, 'max-width': 0})), 
]), 

這是對進入幾乎瞬間和Header字向左滑動，而不是萎縮。 （關於頭設置overflow: hidden完全打破動畫）

然後我試圖動畫flex-grow：

transition(':enter', [ 
    style({'flex-grow': '0.001'}), 
    animate(500, style({'flex-grow': '1'})), 
]), 
transition(':leave', [ 
    style({'flex-grow': '1'}), 
    animate(500, style({'flex-grow': '0.001'})), 
]), 

更好的動畫在進入和休假幾乎沒有動畫。兩者結合在一起：

transition(':enter', [ 
    style({'flex-grow': '0.001'}), 
    animate(500, style({'flex-grow': '1'})), 
]), 
transition(':leave', [ 
    style({width: '*', 'max-width': '*'}), 
    animate(500, style({width: 0, 'max-width': 0})), 
]), 

Plunker

任何想法如何，我可以修復滑動頭？

Answer 1

溶液進行動畫輸入元件爲好。在這種情況下，只有width屬性需要進行動畫：

trigger('anim', [ 
    transition(':enter', [ 
     style({width: 0}), 
     animate(250, style({width: '*'})), 
    ]), 
    transition(':leave', [ 
     style({width: '*'}), 
     animate(250, style({width: 0})), 
    ]), 
    ]), 

Plunker