我们可以用 angular 4 实现 advance transitions/animations 吗？

Question

我只需要用 angular 实现动画 4. 下面是一个想要实现的高级动画示例。试过，我无法用 angular4 编写并行 div 动画。因为使用并行 div 动画，这可以通过 CSS 实现，我相信 angular4 也可以。因此，如果有人知道如何编写，请提供任何提示或代码。

注意：我需要像示例一样将其包含在路由器转换中。

Animation Sample

Answer 1

一种方法是使用过渡别名 :enter 在组件加载时触发动画，然后您可以使用动画状态，因此当您单击 link ，你切换状态来触发动画，一旦动画完成，你就可以最终导航到你想要的页面了。

要在动画完成后执行某些操作，请在模板中使用：(@animation.done)="onDone(event)"。

我用了两个 <div>，一个在页面顶部，另一个在底部。当动画被触发时，它们的高度从 0px 变为 window (50vh) 的一半。

Here is a StackBlitz example I made for this.

component.html

<div [@extend]="state" (@extend.done)="onDone(event)" class="animation-div div-top"></div>

<div class="main-div">
    <a (click)="goTo()">Link 1</a>
    <!-- page content -->
</div>
<div [@extend]="state" class="animation-div div-bottom"></div>

component.ts

import { Component, OnInit } from '@angular/core';
import { extend } from '../animations';
import { Router } from '@angular/router';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  animations: [extend],
  styleUrls: ['../app.component.css']
})
export class HomeComponent implements OnInit {

  state = 'out';
  constructor(private router: Router) { }

  ngOnInit() {
    this.state = 'out';
  }

  onDone($event) {
    if (this.state === 'in') {
      this.router.navigate(['shop']);
    }
  }

  goTo() {
    this.state = 'in';
  }
}

animations.ts

import { animate, state, style, transition, trigger } from '@angular/core';

export const transitionTime = '1.5s';

export const extend =
  trigger('extend', [
    state('in', style({ height: '50vh' })),
    state('out', style({ height: '0px' })),
    transition(':enter', [
      style({
        height: '50vh'
      }),
      animate(transitionTime, style({
        height: '0px'
      }))
    ]),
    transition('* => *', [
      animate(transitionTime)
    ])
  ]);

component.css

.animation-div {
  height: 0px;
  background-color: gray;
  width: 100%;
}

.div-top {
  position: absolute;
  top: 0px;
}
.div-bottom {
  position: absolute;
  bottom: 0px;
}

.main-div {
  position: absolute;
  top: 50px;
  z-index: -1;
}

我们可以用 angular 4 实现 advance transitions/animations 吗？

Can we implement advance transitions/animations with angular 4?

angular

angular-animations