анимированный переход по маршруту имеет неправильную ширину при запуске анимации - PullRequest
Новая
       61

анимированный переход по маршруту имеет неправильную ширину при запуске анимации

0 голосов
/ 04 апреля 2019

Это моя первая попытка анимации перехода маршрута в угловом направлении, и я использую угловой 7

. У меня есть розетка маршрутизатора, и я пытаюсь заставить загруженные компоненты двигаться вниз при выходе и двигаться сверху при входе,У меня эта анимация работает в основном, направление работает.Вот моя анимация: 

export const slideInAnimation = trigger('routeAnimations', [
  transition('* <=> *', [
    style({ position: 'fixed' }),
    query(
      ':enter, :leave',
      [
        style({
          position: 'fixed',
          top: 0,
          left: 0
        })
      ],
      { optional: true }
    ),
    query(':enter', [style({ top: '-100%' })], { optional: true }),
    query(':leave', animateChild(), { optional: true }),
    group([
      query(':leave', [animate('900ms ease-in', style({ top: '100%' }))], {
        optional: true
      }),
      query(':enter', [animate('900ms ease-in', style({ top: '0%' }))], {
        optional: true
      })
    ]),
    query(':enter', animateChild(), { optional: true })
  ])
]);

Компоненты перемещаются сверху и правильно выходят из нижней части.Но в тот момент, когда пользователь нажимает кнопку, компонент на выходе маршрутизатора значительно увеличивает его ширину, и анимация продолжается с компонентом с более широкой шириной.

Вот скриншот начального состояния, за которым следует момент, когда начинается анимация.Это GIF, который показывает изменение ширины: enter image description here

Это как будто он теряет свое позиционирование и теряет ссылку на содержащий его div.

Может кто-то помочьмне понять, что здесь происходит и как сохранить одинаковую ширину компонента на протяжении всей анимации?

Спасибо

...