Question

我想在Angular4中创建一个非常简单的列表动画。但我有一些问题。使用静态数据的交错动画工作正常，但使用动态数据 - 将无法正常工作。

以下是我的示例代码：

app.component.html

<div class="items" [@listAnimation]>
    <div class="item" *ngFor="let item of items" [@listItem]>{{item}}</div>
</div>

我的动画代码在'app.component.ts'

中

  animations: [
    trigger("listItem", [
      transition(":enter", [
        style({opacity: 0}),

        animate(".7s cubic-bezier(.4,0,.21,1)", keyframes([
          style({opacity: 1})
        ]))

      ]),
      transition(":leave", [
        animate(".5s cubic-bezier(.4,0,.21,1)", style({opacity: 0}))
      ])
    ]),
    trigger("listAnimation", [
      transition(":enter", [
        query(":enter", style({opacity: 0}), {optional: true}),
        query(":enter", stagger(100, [animateChild()]))
      ]),
      transition(":leave", [animateChild()])
    ])
  ]

'app.component.ts'主要类

export class AppComponent implements OnInit {
  items = [];


  constructor(
    private ps: PostsService
  ) {}

  ngOnInit() {
    // animation for static array works fine
    this.items = ["asd", "Asd", "zxc"];


    // but animation for this data doesn't work
    this.ps.getPosts()
      .subscribe(res => this.items = res);
  }

如果我想为动态列表设置动画，应用程序会抛出错误：

Unable to process animations due to the following failed trigger transitions
 @listAnimation has failed due to:

- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)

您知道吗，如何解决这个问题？谢谢你的所有答案。

修改我忘了分享两个代码片段。在这里。

post.service.ts

@Injectable()
export class PostsService {

  constructor(
    private http: Http
  ) {}


  public getPosts(): Observable<any[]> {
    return this.http.get("https://jsonplaceholder.typicode.com/users")
      .map(res => res.json());
  }

}

的package.json

{
  "name": "stagger-animation",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.4",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Angular4 - `query（“：enter”）返回动态数据的零元素

0 个答案: