Angular анимация роутера, отображающая элементы, которые были скрыты анимацией - PullRequest
Новая
       26

Angular анимация роутера, отображающая элементы, которые были скрыты анимацией

0 голосов
/ 21 апреля 2020

Я пытаюсь обновить свой Angular проект с 8.x до 9. Как только я выполнил инструкции по обновлению, я заметил, что на одной странице, содержащей внутреннюю анимацию, которая должна скрывать определенные элемент, становится видимым во время анимации маршрутизатора. Я синтезировал проблему в небольшом проекте, который демонстрирует проблему (также можно найти в StackBlitz: https://angular-jbcamx.stackblitz.io)

Например, я создал следующий тестовый компонент: 

@Component({
  selector: 'app-test',
  template: `
  <p>outter text!</p>
  <button (click)="OnClick()">Expose</button>
  <div [@scrollAnimation]="AnimationState" style="overflow: hidden;">
    <p>Inner Text</p>
  </div>`,

  styleUrls: ['./test.component.css'],
  animations: [
    trigger('scrollAnimation', [
      state("show", style({
          height: '*',
      })),
      state("hide", style({
          height: '0px',
      })),
    transition('* => *', [
      animate('0.3s'),
    ])
  ])]
})
export class TestComponent {

  public AnimationState: string = 'hide';

  public OnClick() {
    this.AnimationState = this.AnimationState == 'hide' ? 'show' : 'hide';
  }
}

Этот компонент имеет скрытый текст " Внутренний текст ", который скрыт из-за анимации, которая устанавливает его высоту в 0 пикселей. У меня также есть очень простое определение маршрутизатора: 

const routes: Routes = [
  { path: 'Test1', component: TestComponent, data: { animation: 'Test1Page' } },
  { path: 'Test2', component: TestComponent, data: { animation: 'Test2Page' } },
];

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

@Component({
  selector: 'app-root',
  template: `
  <a class="nav-link" href="#" routerLink="Test1">Test1</a>
  <a class="nav-link" href="#" routerLink="Test2">Test2</a>
  <div [@routeAnimations]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet"></router-outlet>
  </div>
  `,

  styleUrls: ['./app.component.css'],
  animations: [
    trigger('routeAnimations', [
          transition('* <=> *', [
              style({ position: 'relative' }),
              query(':enter, :leave', [
                  style({
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      width: '100%'
                  })
              ], { optional: true }),
              query(':enter', [
                  style({ opacity: '0' })
              ], { optional: true }),
              query(':leave', animateChild(), { optional: true }),
              sequence([
                  query(':leave', [
                      animate('0.3s', style({ opacity: '0' }))
                  ], { optional: true }),
                  query(':enter', [
                      animate('0.3s', style({ opacity: '1' }))
                  ], { optional: true })
              ]),
              query(':enter', animateChild(), { optional: true }),
          ])
      ])]
})
export class AppComponent {
  public prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}

Теперь я могу перемещаться между путями Test1 и Test2, и она каждый раз снова загружает мой тестовый компонент. Когда мой тестовый компонент загружен, « Внутренний текст » скрывается, как и ожидалось. Но когда я перехожу к другому URL-адресу теста, во время анимации затухания маршрутизатора появляется « Внутренний текст », хотя он должен быть скрыт.

Кто-то знает, почему это происходит

...