Angular 顺序路由器动画

Question

我是 angular 动画的新手。我想测试一个具有多个动画阶段的路由器动画。

第一页（主页）有 3 个不同颜色的 div 块。如果我们点击其中之一，它会平滑地缩放到 100% 的宽度。

变成100%后如果需要在中间显示一些文字几秒

紧接着下一页要显示从中间到放大的正方形动画

例如它必须经过以下步骤：

放大框必须显示，因为下一页已经在第一页之后了。

要获得更多许可，请查看此 websites 磁贴点击动画

我想通过 angular 动画来完成这项任务，而且我不熟悉这种复杂的逐步动画。

Answer 1

我无法通过一个动画实现这一点，但我使用了 2 个动画组件来完成它。

为了显示盒子动画，我不得不在应用程序组件中编写动画。

app.component.html =>

<app-header></app-header>

<nav>
  <a routerLink="/home">Dashboard</a>
  <a routerLink="/next">next</a>
</nav>
<div id="page" class="routeContainer" [@routeAnimation]="getDepth(myOutlet)">
  <router-outlet #myOutlet="outlet"></router-outlet>
</div>

app.component.ts =>

import { Component } from '@angular/core';
import {animate, group, query, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('routeAnimation', [
      transition('1 => 2', [
        // animate the leave page away
        group([
          query(
            ':enter',
            [
              style({
                position: 'absolute',
                'z-index' : '100',
                opacity: 1,
                height: '100%',
                width: '100%',
                'clip-path': 'polygon(100px 400px, 400px 400px , 400px 500px, 100px 500px)'

              }),
              animate(
                '3s cubic-bezier(.35,0,.25,1)',
                style({
                  opacity: 1,
                  'clip-path': 'polygon(0px 0px, 100% 0px , 100% 100%, 0px 100%)'
                   })
              ),
            ],
            { optional: true }
          ),
          query(
            ':leave',
            [animate('2s', style({ opacity: 1, 'z-index': '0', }))],
            { optional: true }
          )
        ])
      ]),

    ])
  ]
})
export class AppComponent {
  title = 'app';

  getDepth(outlet) {
    return outlet.activatedRouteData['depth'];
  }


}

在路由中我们声明每条路由的深度值，像这样=>

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: MainComponent, data: {depth: 1} },
  { path: 'next', component: NextComponent, data: {depth: 2} }

];

窗帘动画，我在MainComponent里面单独写了动画

main.component.html

<div class="row main-page">


  <div  [ngClass] ="{'link1-animation' :helpMenuOpen, 'col-sm link1' :!helpMenuOpen }"  (click)="toggle()"
        [@slideInOut]="helpMenuOpen"
        (@slideInOut.done)="animationDone($event)"

  >

    <h1>
      123
    </h1>
  </div>

  <div class="col-sm link2">
  </div>

  <div class="col-sm link3">
  </div>
</div>

main.component.ts

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
  animations: [
    trigger('slideInOut', [
      state('true', style({
        'z-index': 2,
        width: '100%',
        left: 0,
        'background-color': 'pink'
      })),
      transition('0 => 1', animate('1s ease'))
    ])
  ]
})


export class MainComponent implements OnInit {

  public helpMenuOpen = false;

  constructor(private router: Router) {
  }

  ngOnInit() {
  }

  toggle() {
    this.helpMenuOpen = !this.helpMenuOpen ;

  }


  animationDone($event) {

    if (this.helpMenuOpen) {

      this.router.navigate(['/next']);
    }

  }


}

我所做的就是等到窗帘动画完成并导航到下一页。当导航发生时，我在上面做的路线动画将运行.

Angular 顺序路由器动画

Angular sequenced router animation

html

css

angular

animation

angular-animations