Моя проблема: у меня есть элемент primeng p-dialog, который после открытия показывает степпер с двумя шагами. При выборе второго шага я анимирую div, чтобы сдвинуть его влево, чтобы показать содержание шага 2. Анимация просто
trigger('slideLeftPanel', [
state('1', style({ transform: 'translateX(0)' })),
state('0', style({ transform: 'translateX(-50%)' })),
transition('* => *', animate(500))
])
Но я также попытался использовать vh вместо процентов исвойство left вместо transform.
Когда я впервые открываю диалоговое окно, я могу без проблем анимировать назад и вперед между шагами. На шаге 2, если я проверяю элемент, я вижу, что свойство transform:
Но если я затем закрою и снова открою диалоговое окнои выберите шаг 2, анимация происходит, но элемент сбрасывается, чтобы показать первый шаг, и свойство transform:
Угловое: 8.0.2
PrimeNG: 8.0.2
Вот блик стека, который отображает ту же проблему. PrimeNG 6.0.1 - последняя рабочая версия ... проблема появляется в 6.0.2.
https://stackblitz.com/edit/angular-zts2bv
Шаги для воспроизведения:
- 1)Убедитесь, что PrimeNG> 6.0.1
- 2) Нажмите «Показать», чтобы открыть диалоговое окно
- 3) Обратите внимание, что при нажатии «Показать вправо» отображается нужное содержимое, а
наоборот - 4) Обратите внимание, что при отображении правильного содержимого div.outer имеет вычисленное свойство преобразования матрицы (1,0,0,1, -852,0)
- 5) Закрытьдиалоговое окно (щелкните вне его, чтобы закрыть)
- 6) Снова откройте диалоговое окно
- 7) Нажмите «Показать вправо»
Ожидаемое поведение: анимация происходит,показывает правый контент, div.outer имеет указанное выше свойство transform
Фактическое поведение: анимация происходит, показывается левый контент, div.outer имеет свойство transform "none"