Angular2移動動畫

Question

Angular 1處理進入，離開和移動動畫。 Angular 2文檔描述瞭如何進入和離開動畫（void => *和* => void），但是如何在Angular 2中實現動畫？

Answer 1

如果您還沒有閱讀Angular's official guide for animations。

您可以定義動畫狀態以及它們之間的轉換。例如：

animations: [ 
    trigger('heroState', [ 
    state('inactive', style({ 
     backgroundColor: '#eee', 
     transform: 'scale(1)' 
    })), 
    state('active', style({ 
     backgroundColor: '#cfd8dc', 
     transform: 'scale(1.1)' 
    })), 
    transition('inactive => active', animate('100ms ease-in')), 
    transition('active => inactive', animate('100ms ease-out')) 
    ]) 
] 

inactive和active可以用任意的字符串代替，如你願意，你可以有許多獨特的狀態，但必須有每一個，否則動畫不會發生有效轉變。 void是元素尚未附加到視圖時的特例，*是通配符，適用於所定義狀態的任何。

編輯：

嗯...嗯，一件事，你可能能夠使用this Sortable library。它聲稱支持Angular 2並且是純Javascript（沒有jQuery），所以從理論上講，它應該工作得很好，但我自己並沒有使用它。否則，我肯定它可能純粹在Angular 2中，但它可能需要一些相當聰明的代碼。使用transform: translateY()屬性可以輕鬆進行相對運動（不考慮組件或元素的特定位置）。問題在於Angular 2的動畫狀態只適用於組件處於該狀態的情況，所以如果你給它一個translateY（-20px）將一個元素移動到某個位置上，那麼如果你想要移動的話它不會保留這個位置它再次。

請參閱this plunker瞭解我提出的解決方案。

template: ` 
    <div #thisElement> 
    <div class="div-box" @moveState="state">Click buttons to move <div> 
    </div> 
    <button (click)="moveUp()">Up</button> 
    <button (click)="moveDown()">Down</button> 
`, 

我定義動畫狀態爲「爲moveUp」和「下移」期間實際動畫和當組件不移動施加一個「靜態」狀態下才適用。

animations: [ 
trigger('moveState', [ 
    state('moveUp', style({ 
    transform: 'translateY(-30px)'; 
    })), 
    state('moveDown', style({ 
    transform: 'translateY(30px)'; 
    })), 
    state('static', style({ 
    transform: 'translateY(0)'; 
    })), 
    transition('* => moveUp', animate('100ms ease-in')), 
    transition('* => moveDown', animate('100ms ease-out')), 
    transition('* => static', animate('0ms linear')) 
]) 
] 

對於實際啓動動畫功能，它適用的「爲moveUp」或「下移」狀態，然後開始該時間等於過渡的長度的量之後觸發的回調超時。在回調中，它將動畫狀態設置爲「靜態」（向「靜態」狀態的轉換設置爲0 ms，因此我們實際上不會將其移動回靜止位置）。然後，我們使用Renderer爲我們最終想要的地方應用翻譯（使用位置屬性進行計算，該位置屬性將定義它相對於最初位置的位置，而不是它在數組中的位置）。渲染器將​​其樣式與動畫分開應用，以便我們可以應用它們而不會相互衝突。

export class MyComponent { 
    state = 'static'; 
    @ViewChild('thisElement') thisBox: ElementRef; 
    position: number = 0; 

//... 

    moveUp() { 
    this.state = 'moveUp'; 
    this.position--; 
    setTimeout(() => { 
     this.state = 'static'; 
     this.renderer.setElementStyle(this.thisBox.nativeElement, 'transform', 'translateY(' + String(this.position * 30) + 'px)'); 
    }, 100) 
    } 
    moveDown() { 
    this.state = 'moveDown'; 
    this.position++; 
    setTimeout(() => { 
     this.state = 'static'; 
     this.renderer.setElementStyle(this.thisBox.nativeElement, 'transform', 'translateY(' + String(this.position * 30) + 'px)'); 
    }, 100) 
    } 
//... 
} 

這只是你如何移動的動畫，而無需定義狀態對每一個可能的位置，它可能是一個例子。至於觸發數組操作的動畫，你必須明白這一點爲自己。我會用EventEmitters或Subjects的某種實現來發送事件給組件，然後決定是否需要動畫。