Question

在我的应用程序中，当使用路由从菜单加载组件时，我想使用一些动画。我成功地用角度动画做到了。我不得不在单个组件中应用动画来实现这一点。我需要知道是否有更好的方法将动画应用于从特定基类继承的一组组件或组件？

目前我已经应用了我的动画，

import { Component, OnInit } from '@angular/core';
import { routerTransition } from "../animations/animations";

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  animations: [routerTransition()],
  host: {'[@routerTransition]': ''}
})
export class BaseComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

动画代码，

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

export function routerTransition() {
  return slideToLeft();
}

function slideToLeft() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%'}) ),
    state('*', style({position:'fixed', width:'100%'}) ),
    transition(':enter', [  // before 2.1: transition('void => *', [
      style({transform: 'translateX(100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [  // before 2.1: transition('* => void', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
    ])
  ]);
}

我尝试了什么：

我尝试在那里创建一个基本组件，应用动画属性，并在所需的其他组件中扩展基本组件。之后动画停止了工作。

如果我们可以重复使用动画而不将其应用于单个组件，请告诉我。

Answer 1

Check this tutorial ，非常好地解释了如何使用动画：对于多个元素的动画，您应该使用具有不同状态的许多触发器。查看视频。

Answer 2

从4.2版开始，Angular支持通过动画DSL中较新的query()和stagger()功能动画化多个元素。

本文介绍了新功能：https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html

如何在Angular2中使用基本组件将动画应用于多个组件？

2 个答案: