Похоже, что вы допустили небольшую ошибку со своими переходами в анимации animateText
:
transition('close => open', animate('1500s ease-in')),
transition('open => close', animate('1500s ease-out')),
должно быть:
transition('hide => show', animate('1500ms ease-in')),
transition('show => hide', animate('1500ms ease-out'))
Кроме того, невозможно создавать анимацию с помощью свойства display
. Вам лучше использовать max-width
или transfrom: scale()
.
Примером может быть:
export const animateText = trigger('animateText', [
state('hide',
style({
opacity: 0,
'max-width': 0,
transform: 'scale(.5)'
})
),
state('show',
style({
opacity: 1,
'max-width': '200px',
transform: 'scale(1)'
})
),
transition('hide => show', animate('250ms ease-in')),
transition('show => hide', animate('250ms ease-out'))
]);
РЕДАКТИРОВАТЬ: Вы также можете взглянуть на анимации по ключевым кадрам для более сложных анимаций. С ключевыми кадрами можно было бы использовать свойство display: none
.
transition('show => hide', [
animate(
`500ms linear`,
keyframes([
style({ transform: 'scale(1)', opacity: 1, offset: 0 }),
style({ transform: 'scale(.5)', opacity: 0, offset: .99 }),
style({ transform: 'scale(.5)', opacity: 0, display: 'none', offset: 1 }),
])
)
])
(offset
указывает на ход анимации)
В приведенном выше примере создается затухающая анимация и добавляется display: none
после того, как анимация достигла 100%. Поскольку display: none
добавляется в конце, анимация не нарушается.