A minha ideia foi um pouco diferente. Uma vez que a mensagem só irá aparecer quando já estiver no DOM, então, em animations.ts, então, bastou o ':enter':
export const noTasksTrigger = trigger('noTasks', [
transition(':enter', [
style({
opacity: 0,
width: 0
}),
animate('400ms ease-in', keyframes([
style({offset: 0, opacity: 0, width: 0}),
style({offset: 0.8, opacity: 0.5, width: '*'}),
style({offset: 1, opacity: 1, width: '*'})
]))
])
]);
e, no template :
<ng-template #semTarefas>
<p @noTasks class="ng-template ff-prompt">Olá! Ainda não há tarefas por aqui! :)</p>
</ng-template>
