Question

我一直在检查以下有角度的2个动画文档：https://angular.io/docs/ts/latest/guide/animations.html

并开始玩它。我选择了最简单的例子，并做了以下事情：

添加到我的组件：

animations: [
    trigger('dataState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]

已添加到我的模板中：

<div class="well"
[@dataState]="data.active"
 (click)="data.toggleState()" style="cursor:pointer">
SOME TEXT
</div>

肯定是进口了一切......

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

但是当我点击我的对象时，我得到了：

browser_adapter.js:86 TypeError: self.context.$implicit.toggleState is not a function

由于toggleState不在我试图删除的文档中，但毕竟没有动画效果（虽然没有错误）

我缺少什么？

Answer 1

您通过[@dataState]="data.active"分配给@dataState的值可以是示例中的'active'或'inactive'。（好吧，价值可能会有所不同，但除非你指明，否则不会产生任何影响）

所以你的component.ts需要一个属性data.active，它有一个作为它的值。触发动画的是它们之间的变化：

[@dataState]="'active'" 至 [@dataState]="'inactive'"或反之亦然

data.active只是一个变量，data.toggleState()是一个为其分配'active'或'inactive'的函数。

Answer 2

我也碰到了这个。我发现大多数文档都会引导您完成所需的每个步骤，但在此处它会跳过添加一些设置。我猜他们假设在文档中这一点上有一些事情是不言自明的。

如果您查看live plunker example并查看代码，就可以看到他们是如何设置代码的。

在app / hero.service.ts中，他们添加了一个构造函数，将一个hero.state字符串和一个toggleState（）方法添加到Hero类中。

FlowLayout

根据您的错误和问题，似乎您还没有添加其中任何一个，这就是为什么toggleState（）不是一个函数，没有状态属性就无法切换。

对于你的例子，你可以（取决于你的班级）做这样的事情：

class Hero {
  constructor(public name: string,
              public state = 'inactive') {
  }

  toggleState() {
    this.state = (this.state === 'active' ? 'inactive' : 'active');
  }
}

Answer 3

我还发现angular.io上的动画文档不完整。我使用了示例代码并进行了一些小的更改，以使其与TOH app tutorial中的代码一起使用。

<强> TL; DR

将一个state="inactive"属性添加到hero.ts英雄类中，以跟踪每个英雄的动画状态。

在HTML中，将(click)="hero.toggleState()"方法绑定更改为(click)="toggleState(hero)"并在HeroesComponent类中编写该方法：

toggleState(hero: Hero) { hero.state = (hero.state === 'active' ? 'inactive' : 'active'); }

重新引用onSelect()方法，以便gotoDetail()导航有效。

Working plunk that follows steps below

Here is the plunker they provide with everything complete through section 5 - routing.如果您愿意，请使用它来跟随。

我将逐步介绍如何修改插件以实现动画文档中的第一个动画。

他们在动画文档中部分引导您的第一个代码是在“英雄”视图中向选定的英雄添加动画活动/非活动状态（而不是仪表板视图）：

import { Component, Input, trigger, state, animate } from '@angular/core';
import { Heroes } from './hero.service';
@Component({
  moduleId: module.id,
  selector: 'hero-list-basic',
  template: `
    <ul>
      <li *ngFor="let hero of heroes"
          [@heroState]="hero.state"
          (click)="hero.toggleState()">
        {{hero.name}}
      </li>
    </ul>
  `,
  styleUrls: ['hero-list.component.css'],
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]
})
export class HeroListBasicComponent {
  @Input() heroes: Heroes;
}

上面，他们的（动画示例）代码与 app / heroes.component.ts （来自plnkr）中的代码相似，并注意到html / css已被解压缩到plnkr上的单独文件中。我认为大多数阅读本文的人都遵循本教程并且熟悉此代码。

<强> heroes.component.html 新的动画将基本上复制每个英雄<li>的现有绑定，所以删除这两行 - 因为如果我们保留它们就会发生冲突 - 我们将通过动画状态恢复该功能。

<ul class="heroes">
  <li *ngFor="let hero of heroes">

    --------->[class.selected]="hero === selectedHero"
    --------->(click)="onSelect(hero)">

    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

来自动画示例的新html：

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [@heroState]="hero.state"
    (click)="hero.toggleState()">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

我不想将toggleState方法添加到英雄类中，我希望它在调用它的组件中。所以我将点击绑定更改为

(click)="toggleState(hero)"

并简单地将点击的英雄传递给我们仍然需要编写的方法。

hero还没有属性state，所以让我们在 app / hero.ts 中添加

：

将state:string = "inactive";添加到属性列表中。

现在让我们回到 heroes.component.ts ，导入我们的动画依赖项，在@Component中添加动画元数据，然后创建toggleState()方法。我们希望保留从html中删除的onSelect()方法，我们会稍后对其进行修改并重复使用。

在顶部，替换

import { Component, OnInit } from '@angular/core';

与

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

在animations之后附加styleUrls: [ ... ],元数据：

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

在HeroesComponent类中添加以下方法：

toggleState(hero: Hero) {
  hero.state = (hero.state === 'active' ? 'inactive' : 'active');
}

这样一切顺利。现在让我们揭开英雄的细节。列表后的英雄细节有点模糊，显示选择了哪个英雄，并伴有导航到细节/：id路线的按钮。但现在它已经消失了。我们分离的onSelect()方法就是启动它。

让我们将onSelect()重命名为updateSelectedHero()，然后从toggleState()内部调用它：

  updateSelectedHero(hero: Hero): void {
    this.selectedHero = hero;
  }

  toggleState(hero: Hero) {
    hero.state = (hero.state === 'active' ? 'inactive' : 'active');
    this.updateSelectedHero(hero);
  }

aaand我们重新开始营业。英雄详细信息显示，它的查看详细信息按钮调用gotoDetail（）。有令人讨厌的UI漏洞需要解决，但你明白了。

My finished plunk

角度2动画

3 个答案: