Question

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

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

Animation Sample

Answer 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;
}

我们可以用角度4实现高级过渡/动画吗？

1 个答案: