web-dev-qa-db-ja.com

Angularルーターの遷移アニメーションは条件付きで左右にスライドします

Angularのルーター遷移アニメーションに関するこの記事を読みました：

https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8

そして：

ルーティングされたコンポーネントのAngular 2 "slide in animation"

ただし、これは静的すぎます。タブの順序に応じて、左およびにスライドさせます。

このためのルーターアニメーションを作成することは可能ですか？私が意味することの例は以下の通りです：

https://material.angular.io/components/tabs/examples

スライドする方法を見る[〜＃〜]両方[〜＃〜]左および使用しているタブに応じて、非常に自然に正しくなります。

タブは実行時に追加されるため、これは動的である必要があります。

angularangular-routingangular-animations
9
Dolan

新しいアニメーションエイリアスは：incrementおよび：decrementとして存在するため、今日は少し簡単になっています。エイリアスはAngular 5.で導入されました。

だから私の変更された解決策は：

    @Component({
      selector: 'app-workspace-container',
      templateUrl: './workspace-container.component.html',
      styleUrls: ['./workspace-container.component.scss'],
      animations: [
        trigger('animRoutes', [
          transition(':increment', right),
          transition(':decrement', left),
        ]),
      ],
  })
  export class ComponentContainingRouterOutlet implements OnDestroy, OnInit {
    //... ngOnInit,ngOnDestroy

    constructor( private route: ActivatedRoute ) { }

    animationState: number;

    onActivate($event) {
      this.animationState = this.route.firstChild.snapshot.data['routeIdx'];
    }
  }

ルーターアウトレット位置でのアニメーションの呼び出し：

<div [@animRoutes]="animationState">
  <router-outlet (activate)="onActivate($event)"></router-outlet>
</div>

例としてルート定義を変更し、data: { routeIdx: X }：

    const routes: Routes = [
      {
        path: 'routeOne',
        component: ComponentOne,
        data: { routeIdx: 0 }
      },
      {
        path: 'routeTwo',
        component: ComponentTwo,
        data: { routeIdx: 1}
      },
      {
        path: 'routeThree',
        component: ComponentThree,
        data: { routeIdx: 2 }
      },
      {
        path: 'routeFour',
        component: ComponentFour,
        data: { routeIdx: 3 }
      },
      {
        path: '',
        redirectTo: 'routeOne',
        pathMatch: 'full'
      }
    ]

そして遷移は Dolan's ポストと同じです：

const left = [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
    group([
        query(':enter', [style({ transform: 'translateX(-100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
            optional: true,
        }),
        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(100%)' }))], {
            optional: true,
        }),
    ]),
];

const right = [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
    group([
        query(':enter', [style({ transform: 'translateX(100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
            optional: true,
        }),
        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(-100%)' }))], {
            optional: true,
        }),
    ]),
];
7
Michal.S

私は、これを現在の状態に「偽装」することでなんとか動作させることができました。

component.html：

<div [@animRoutes]="pageState">
   <router-outlet></router-outlet>
</div>

pageStateはcomponent.tsファイルの変数です。

右に移動したいタブをクリックするたびに、pageStateをrightに設定し、leftも同じようにして、Angular残りを引き継ぎます。

注：rightとright1の状態をhackとして作成する必要があります。現在Angularはright => rightの状態遷移をサポートしていません!!もちろんleftにも同じことが言えます。

私の@Componentアノテーションは以下の通りです：

@Component({
    selector: 'app-workspace-container',
    templateUrl: './workspace-container.component.html',
    styleUrls: ['./workspace-container.component.scss'],
    animations: [
        trigger('animRoutes', [
            transition('* => right', right),
            transition('* => left', left),
            transition('* => right1', right),
            transition('* => left1', left),
        ]),
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
})

left、left1、right、right1は次のとおりです。

const left = [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
    group([
        query(':enter', [style({ transform: 'translateX(-100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
            optional: true,
        }),
        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(100%)' }))], {
            optional: true,
        }),
    ]),
];

const right = [
    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
    group([
        query(':enter', [style({ transform: 'translateX(100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
            optional: true,
        }),
        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(-100%)' }))], {
            optional: true,
        }),
    ]),
];

TL; DR：実行する状態をvariableにして、実行する状態を動的に設定できるようにします。

0
Dolan