Условно: введите анимацию компонента в угловых

Question

Учитывая маршруты моего приложения:

const appRoutes: Routes = [
  {
    path: '', component: HomeComponent, children: [
    {path: 'datascreen', component: DataComponent},
    {path: '', component: IntroComponent}
  ]
  }
];

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

С помощью кнопки на компоненте данных пользователь может вернуться к интро-компоненту.

Шаблон HomeComponent содержит только выход:

<router-outlet></router-outlet>

Я хочу добавить слайд-анимацию в IntroComponent. Это легко сделать, добавив анимацию в IntroComponent с триггером ":enter" и ":left". Это отлично работает.

Но именно эта анимация теперь отображается и при первом отображении экрана. И это выглядит как-то странно.

Поэтому мой вопрос: как я могу добавить анимацию в IntroComponent, которая выполняется только после начальной загрузки? Или другими словами: как можно выполнить анимацию: enter при втором появлении компонента?

Answer 1

При создании угловой анимации у вас есть несколько важных состояний. Первое состояние void => * . Это так же, как сокращение: введите

Когда вы впервые загружаете представление, вы попадаете на это событие анимации. Если вы помещаете триггер в компонент, то КАЖДЫЙ раз вы запускаете этот компонент, и он запускает этот триггер, точно так же, как каждый раз, когда вы запускаете компонент, он собирается запускать код внутри ngOnInit. Таким образом, решение вашей проблемы состоит в том, чтобы переместить анимацию OUT компонента и вместо этого обернуть ваш выход маршрутизатора анимационным триггером, который управляет анимацией всего приложения.

Вы хотите, чтобы ваш: enter был таким, каким является анимация загрузки вашего приложения, например, постепенное появление или что-то релевантное, тогда вы захотите установить анимацию с маршрута 1 на маршрут 2 с помощью методов слайд-и-слайд. Таким образом, если вы перемещаетесь, он скользит влево и вправо, но если вы ЗАГРУЗИТЕ, он просто исчезает.

Взято из YearofMoo Год Му Му Маршрутизируемые Анимации

<!-- app.html -->
<div [@routeAnimation]="prepRouteState(routerOutlet)">
  <!-- make sure to keep the ="outlet" part -->
  <router-outlet #routerOutlet="outlet"></div>
<div>

затем

// app.ts
@Component({
animations: [
trigger('routeAnimation', [
  // no need to animate anything on load
  transition(':enter', []),
  // when we go away from the home page to support
  transition('homePage => supportPage', [
      group([
        query(':enter', [
          style({ opacity: 0 }),
          animate('0.5s', style({ opacity: 1 }))
        ]),
        query(':leave', [
          animate('0.5s', style({ opacity: 0 }))
        ])
      ])
    ]),
  // and when we go back home
  transition('supportPage => homePage', [
    // ...
  ])
])
]
})
class AppComponent {
  prepRouteState(outlet: any) {
  return outlet.activatedRouteData['animation'] || 'firstPage'; 
}
}


<!-- app.ts -->
const ROUTES = [
  { path: '',
    component: HomePageComponent,
    data: {
      animation: 'homePage'
    }
  },
  { path: 'support',
    component: SupportPageComponent,
    data: {
      animation: 'supportPage'
    }
  }    
]