角4動畫將不會在路由變化觸發

Question

我創建了下面的動畫在我的角4項目：

import { trigger, state, style, transition, animate } from '@angular/animations'; 

export function slide() { 
    return trigger('slide', [ 
      transition('void => *', [ 
       style({opacity: 0}), 
       style({transform: 'translateX(100%)'}), 
       animate('1s ease-in-out', style({transform: 'translateX(0%)', opacity: 1})) 
      ]), 
      transition('* => void', [ 
       style({opacity: 0}), 
       style({transform: 'translateX(100%)'}), 
       animate('1s 2s ease-in-out', style({transform: 'translateX(0%)', opacity: 1})) 
      ]) 
     ]) 
    } 

我已經附加動畫使用@Component裝飾的host財產我的組件。

@Component({ 
    selector: 'test', 
    templateUrl: './test.component.html', 
    styleUrls: ['./test.component.scss'], 
    animations: [slide()], 
    host: {'[@slide]': '', 'style': 'display: block;'} 
}) 

現在，我希望動畫在兩個點觸發： 1.當組件被初始化，又名當我打的適當途徑 2.當我離開這條路線並導航到另一個

第一種情況完美無瑕，但第二種情況沒有。我在這裏錯過/做錯了什麼？

Answer 1

經過一些試驗和錯誤之後，我設法得到了類似於動畫的東西。

export function slideLeft() { 
    return slide(); 
} 

function slide() { 
    return trigger('slide', [ 
     state('void', style({position:'absolute', width:'100%'})), 
     state('*', style({position:'absolute', width:'100%'})), 
     transition('void => *', [ 
      style({transform: 'translateX(100%)', opacity: 0 }), 
      animate('1s ease-in-out', style({transform: 'translateX(0%)', opacity: 1 })) 
     ]), 
     transition('* => void', [ 
      style({transform: 'translateX(0%)', opacity: 1 }), 
      animate('1s ease-in-out', style({transform: 'translateX(-100%)', opacity: 0 })) 
     ]) 
    ]); 
} 

這是我的動畫代碼。

@Component({ 
    selector: 'app-away', 
    templateUrl: './away.component.html', 
    styleUrls: ['./away.component.css'], 
    animations: [ slideLeft() ], 
    host: { '[@slide]': '' } 
}) 

這是我如何將它應用到組件。

對於離開的動畫，您使用了與輸入動畫完全相同的屬性。你想要的是讓你動畫的組件在離開時從0％移動到-100％。

我還添加了一些狀態輔助功能，適用的位置樣式：絕對把你的組件出頁面的正常流動。

希望這會有所幫助。