Angular Родительские и дочерние анимации по CSS запросу - PullRequest
Новая
       81

Angular Родительские и дочерние анимации по CSS запросу

0 голосов
/ 28 мая 2020

Я пытаюсь добавить анимацию в таблицу PrimeNG. Я не могу добавить декоратор анимации непосредственно к элементу, который мне нужно анимировать, поэтому я пытаюсь запросить его.

Я пытаюсь скрыть тело таблицы, нажимая кнопку, которая переключает логическое значение. Все это прекрасно работает. Мне нужно одновременно изменить высоту содержащего div и перевести содержимое таблицы, чтобы плавно скрыть его.

Обе эти анимации отлично работают независимо, но когда я пытаюсь запустить их параллельно, запрашиваемая анимация срабатывает, тогда состояние "ложь" родительского компонента запускается без какой-либо анимации. Другими словами, строки сдвигаются вверх, а затем содержащий их div исчезает без перехода по высоте.

I wi sh animateChild() принял те же параметры, что и animate(), но поскольку это не так, я я не знаю, как действовать здесь. Я не могу найти примеров того, что пытаюсь сделать. 

trigger('tableCollapse', [
            state('true', style({ 'height: '36px' })),
            state('false', style({ 'height: '*' })),
            transition('false => true', [
                group([
                    query(':self', [animate('250ms')]),
                    query('div.ui-table', [
                        animate('250ms', style({ transform: 'translateY(-100%)' })),
                        animateChild()
                    ])
                ])
            ]),
            transition('true => false', [
                group([
                    query('div.ui-table', [
                        animate('250ms', style({ transform: 'translateY(0)' })),
                        animateChild()
                    ]),
                    query(':self', [animate('250ms')])
                ])
            ])
        ])
...