Угловой 2 Анимация состояния пустоты маршрутизируемого компонента

Question

Я использую свойство хоста декоратора компонента, чтобы объявить триггер анимации, который включает состояние перехода для * => void.

Я знаю, что это запускается, потому что я применил длительность 800 мс (для тестирования я изменил его на 5 секунд, чтобы убедиться), и когда я нажимаю на routerLink, который переносит его на другой компонент, есть 5 вторая задержка.

Проблема в том, что анимации не происходит. Она должна быть раздвижными влево и выцветанию непрозрачности: 0.

Вот код в компоненте декоратора:

host: { 
    '[@slideInOutright]': 'true', 
}, 
animations: [ 

    trigger('slideInOutright', [ 

    state('*', style({transform: 'translateX(0)'})), 

    transition('void => *', [ 
     style({transform: 'translateX(150px)', opacity:'1'}), 
     animate('300ms 500ms ease-out') 
    ]), 
    transition('* => void', [ 
     animate('800ms', style({transform: 'translateX(-60px)',opacity: '0'})) 
    ]) 
    ]) 

] 

Answer 1

Вы должны вызвать ваше состояние true вместо *.