我们可以使用角度4来实现高级过渡/动画吗? [英] Can we implement advance transitions/animations with angular 4?

问题描述

我只需要实现角度为4的动画.以下是要实现的示例高级动画.尝试过，我不能用angular4编写平行的div动画.因为使用并行div动画，这也可以通过CSS来实现，所以我也相信angular4也可以.因此，如果有人知道如何编写，请提供任何提示或代码.

I need to implement animations only with angular 4. Below is a sample advance animation that would like to implement. Tried and I couldn't write parallel div animations with angular4. Because with parallel div animations this could achieve via CSS also I believe with angular4 also. So if anyone knows how to write please provide any hint or code.

注意:我需要像示例一样将其包括在路由器转换中.

Note: I need to include it into router transition just as the example.

动画示例

推荐答案

一种方法是在组件加载时使用过渡别名:enter触发动画，然后可以使用动画状态，因此当您单击链接时，可以切换状态以触发动画，动画完成后，您最终可以导航到所需的页面.

A way to do this is to use the transition alias :enter to trigger the animation when the component loads, and then you can use the animations states, so when you click on a link, you toggle the state to trigger the animation, and once the animation is done, you can finally navigate to the page you want.

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

To do something once the animation is done, use this : (@animation.done)="onDone(event)" in the template.

我使用了两个<div>，一个在页面顶部，另一个在底部.触发动画时，它们的高度从0px到窗口的一半(50vh).

I used two <div>, one at the top of the page and another one at the bottom. When the animation is triggered, their height go from 0px to half of the window (50vh).

这是我为此做的StackBlitz示例.

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来实现高级过渡/动画吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！