我们可以使用 Angular 4 实现高级过渡/动画吗？答案

【问题标题】：Can we implement advance transitions/animations with angular 4?我们可以使用 Angular 4 实现高级过渡/动画吗？
【发布时间】：2018-05-27 09:34:51
【问题描述】：

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

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

Animation Sample

【问题讨论】：

无法访问动画示例的链接
@br.julien 它是可访问的。我和我的朋友查了一下。它说什么？

标签： angular angular-animations

【解决方案1】：

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

要在动画完成后做某事，请在模板中使用：(@animation.done)="onDone(event)"。

我使用了两个<div>，一个在页面顶部，另一个在底部。触发动画时，它们的高度从 0px 变为窗口的一半（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;
}

【讨论】：

抱歉回复晚了。我会尽快检查。 2018 年快乐！