Угловая анимация внутри одного компонента - PullRequest
Новая
       16

Угловая анимация внутри одного компонента

0 голосов
/ 09 октября 2018

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

Это мои настройки маршрутизации: 

const routes: Routes = [
      {path: '', redirectTo: '/home', pathMatch: 'full'},
      {path: 'not-found', component: PageNotFoundComponent},
      {path: 'home', component: HomeComponent, data: { state: 'home'}},
      {path: 'stage', component: StageComponent, data: { state: 'stage'}},
      {path: 'documenten', component: DocumentenComponent, data: { state: 'documenten'}},
      {path: 'competenties/:uid', component: CompetentieComponent, data: { state: 'competenties/:uid'}}
];

Это моя анимация: 

    export const routerTransition = trigger('routerTransition', [
    transition('* <=> *', [
        query(':enter, :leave', style({position: 'fixed', width: '100%'})
            , {optional: true}),
        group([
            query(':enter', [
                style({transform: 'translateX(100%)'}),
                animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
            ], {optional: true}),
            query(':leave', [
                style({transform: 'translateX(0%)'}),
                animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}
            ], {optional: true}),
        ])
    ]),
    ]);

ЭтоHTML используется для вызова анимации 

<div [@routerTransition]="getState(o)">
     <router-outlet #o="outlet"></router-outlet>
</div>

Это TypeScript для шаблона: 

import {routerTransition} from './animations';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [routerTransition]
})

export class AppComponent {
    public getState(outlet) {
        return outlet.activatedRouteData.state;
    }
}

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

Спасибо!

1 Ответ

0 голосов
/ 06 декабря 2018

Проблема в том, что компонент используется повторно, и угловая обработка в этом случае не вызывает никаких изменений, и, следовательно, анимация перехода не запускается.

Эта публикация предоставила решение https://medium.com/frontend-coach/angular-router-animations-what-they-dont-tell-you-3d2737a7f20b

...