角度路由器过渡动画有条件地左右滑动

现在事情变得更简单了,因为新的动画别名 :增量 和 :递减 . 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,
        }),
    ]),
];

我通过“伪装”它所处的状态,成功地实现了这一目标。

在 component.html :

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

pageState 是一个 变量 在 component.ts 文件

每当我单击要向右移动的选项卡时,我将设置 页面状态 到 right ,与相同 left ,并让 有棱角的 接管其余部分。

注: 您必须创建 正当 和 right1 状态为 乱劈 ,因为Angular当前不支持 right => right 状态转换!!同样适用于 左边 当然

我的 @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,
})

哪里 左边 , left1 , 正当 , 右侧1 是:

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;博士: 让你的状态变成 变量 ,这样您就可以动态地设置希望进入的状态。

Michal提供的绝佳解决方案。S、 因此,我也可以在没有Routechange的情况下使用它,但也可以在您自己的选项卡组件上使用它。

如果您有自定义选项卡控件,则可以按如下方式执行:

第一步:在上面添加动画

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

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

步骤2:在模板中,将触发器添加到动画项的容器中。相对或柔性定位。

<div [@animStep]="currentStep">
    <app-step1 *ngIf=“currentStep === 1”></app-step1>
    <app-step2 *ngIf=“currentStep === 2”></app-step2>
    <app-step3 *ngIf=“currentStep === 3”></app-step3>
</div>

步骤3:在组件装饰器中添加动画

// component
animations: [
  trigger('animStep', [
    transition(':increment', right),
    transition(':decrement', left),
  ]),
],

步骤3:触发值的更改

currentStep += 1;