Angular 2 - 动画过渡不起作用

Question

我是一位有用的助手，可以为你翻译文本。

我需要在点击事件中实现两种颜色之间的过渡。当前，我的代码如下： Typescript

animations: [
    trigger('menubarState', [
        state('false', style({backgroundColor:'#43a047'})),
        state('true', style({backgroundColor:'#333'})),
        transition('false => true', animate('1s')),
        transition('true => false', animate('1s'))
    ])
]

...

export class MenubarComponent {
  menuActive: boolean = false;
  onMenuClick () {
    if (this.menuActive == false) {
      this.menuActive = true;
    } else {
      this.menuActive = false;
    }
  }
}

HTML

<li [@menubarState]="menuActive" (click)="onMenuClick()">
      <a><span class="material-icons icon">apps</span></a>
</li>

这确实会改变background-color，但改变是瞬间发生的，而不是有过渡效果。

我正在使用Chrome浏览器，最新版本。

- FlorisdG

Answer 1

这个问题困扰了我很长时间，解决方法是把我的状态变量从布尔类型改为字符串类型。所以，不要追踪true和false，而是追踪'true'和'false'。根据Angular文档:

动画状态是您在应用程序代码中定义的字符串值。

将您的MenubarComponent类更改为以下内容：

export class MenubarComponent {
  menuActive: string = 'false';
  onMenuClick () {
    if (this.menuActive === 'false') {
      this.menuActive = 'true';
    } else {
      this.menuActive = 'false';
    }
  }
}

我认为这很愚蠢。布尔值显然是二进制状态的好选择。

更多信息：https://angular.io/guide/animations#states-and-transitions

- Aaron Krauss

Answer 2

对Aaron Krauss提供的答案进行扩展。它存在直接解释true/false值的问题；但是，如果您不想引用字符串上下文，可以将上述中的true和false替换为数字1（true）和0（false）。这证明修复了我的问题，并且不需要任何令人讨厌的字符串解释。

trigger('menubarState', [
    state('0', style({backgroundColor:'#43a047'})),
    state('1', style({backgroundColor:'#333'})),
    transition('0 => 1', animate('1s')),
    transition('1 => 0', animate('1s'))
])

- I. Buchan

Answer 3

进一步扩展了Aaron Krauss的答案：

我不想将我的布尔值转换为字符串，所以我定义了一个getter：

public menuActive: boolean = false;

get menuState() {
  return this.menuActive ? 'active' : 'inactive'
}

然后在您的动画定义中（我合并了转换，因为它们是相同的）：

animations: [
  trigger('menubarState', [
    state('inactive', style({backgroundColor:'#43a047'})),
    state('active', style({backgroundColor:'#333'})),
    transition('inactive <=> active', animate('1s'))
  ])
]

为了完整起见，这是模板：

<li [@menubarState]="menuState" (click)="onMenuClick()">
  <a><span class="material-icons icon">apps</span></a>
</li>

- Hetty de Vries

Answer 4

请确保在app.module.ts文件中导入BrowserAnimationsModule。

- Zahra Shokrian

Answer 5

我不知道我的回答是否解决了这个问题，但如果你使用Ionic/Angular，触发器/转换无效，只能使用触发器/状态。

如果你使用的是Ionic/angular，你应该使用Ionic动画。 https://ionicframework.com/docs/utilities/animations

- Peter

Answer 6

我在Angular 2中使用了动画来处理路由/点击。它也适用于onClick。 使用此代码进行所有类型的路由，您可以为不同的路由更改或onclick使用单独的动画。

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
export const slideInDownAnimation: AnimationEntryMetadata =
  trigger('routeAnimation', [
    state('*',
      style({
        opacity: 1,
        backgroundColor:'#43a047',
        transform: 'translateX(0)'
      })
    ),
    transition(':enter', [
      style({
        opacity: 0,
        backgroundColor:'#333',
        transform: 'translateX(-100%)'
      }),
      animate('0.2s ease-in')
    ]),
    transition(':leave', [
      animate('0.5s ease-out', style({
        opacity: 0,
        backgroundColor:'red',
        transform: 'translateY(100%)'
      }))
    ])
  ]);

您也可以根据自己的选择修改上述代码。

- Shubham Verma

Answer 7

我不明白为什么这个设置会返回一个空白页面。如果我移除 transition()，它就能正常工作。

import { state, style, transition, trigger } from '@angular/animations';
import { Component } from '@angular/core';
// import { reduce } from 'rxjs-compat/operator/reduce';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  animations: [
    trigger('divState', [
      state('normal', style({
        backgroundColor: 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        backgroundColor: 'blue',
        transform: 'translateX(100px)'
      })),
      transition('normal => highlighted', animate(300)),
      transition('highlighted => normal', animate(800))
    ])
  ]
})
export class AppComponent {
  anim='normal';
  list = ['Milk', 'Sugar', 'Bread'];
  onAnimate(){
    this.anim == 'normal' ? this.anim='highlighted' : this.anim ='normal';
    
  }

    onAdd(item) {
      this.list.push(item);
    }
}
function animate(arg0: number): any {
  throw new Error('Function not implemented.');
}

- lebanta

Answer 8

你不能使用CSS吗？

例如：

<!DOCTYPE html>
<html>
<head>

    <style>
    div {
       background-color: #FF0;
       height: 200px;
       width: 100px;
      animation: fontbulger 2s infinite;
    }

    @keyframes fontbulger {
     0% {
       background-color: blue;
     }
     50% {
       background-color: red;
     }
     100% {
       background-color: blue;
    }
    }
    </style>
    <title>test</title>
</head>
<body>
    <div></div>
</body>
</html>

- Linushg111

---

不，我必须在点击时执行它。因此我必须在网络应用程序的后端使用TypeScript。 - FlorisdG