Question

main.component.ts

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
  animations: [
    trigger('optionState', [
      state('inactive', style({
        backgroundColor: 'red',
        width: '100px',
        height: '100px'
      })),
      state('active', style({
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      }))
    ])
  ]
})
export class MainComponent implements OnInit {
  public state = "inactive"
  constructor() { }

  ngOnInit() {
  }

  show() {
    this.state = "active"
  }
}

main.component.html

<div [@optionState]="state"
     (click)="show()">
  lol
</div>

的package.json

  "dependencies": {
    "@angular/animations": "^4.4.5",
    "@angular/common": "^4.4.5",
    "@angular/compiler": "^4.4.5",
    "@angular/core": "^4.4.5",
    "@angular/forms": "^4.4.5",
    "@angular/http": "^4.4.5",
    "@angular/platform-browser": "^4.4.5",
    "@angular/platform-browser-dynamic": "^4.4.5",
    "@angular/router": "^4.4.5",
  }

好吧，我只是在角色试图让动画工作。但出于某种原因。它没有，我不知道为什么。在我的app模块中，我导入了BrowserAnimationsModule。我正在使用Chrome浏览器。

编辑 - 顺便说一句，这不会产生错误，所以我不知道如何调试它。

Answer 1

您错过了从*到*状态的过渡动画：

<强> HTML：

 ...
 animations:[
    trigger('optionState', [
      state('inactive', style({
        backgroundColor: 'red',
        width: '100px',
        height: '100px'
      })),
      state('active', style({
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      })),
      transition('* => *', animate('500ms'))
    ])  
  ]

另外，要恢复初始状态：

<强>打字稿：

  show() {
    this.state = this.state == "active" ? "inactive" : "active"
  }

DEMO

为什么我的动画不是有角度的？

1 个答案: