9

我需要两种颜色之间的过渡OnClick。现在，这是我的代码：

打字稿

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。

4

6 回答 6

12

这让我困扰了很长时间，解决它的问题是将我的状态变量从布尔类型更改为字符串类型。所以 - 而不是跟踪trueand false，跟踪'true'and '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

于 2017-04-10T15:51:10.740 回答
3

扩展 Aaron Krauss 提供的答案。对真/假值的直接解释存在问题；但是，如果您不想引用字符串上下文，则可以将上面的 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'))
])
于 2017-05-04T21:17:45.090 回答
1

进一步扩展 Aaron Krauss 的回答：我不想将我的布尔值转换为字符串，所以我定义了一个吸气剂：

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>
于 2017-11-24T12:26:02.387 回答
0

我在角度 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%)'
      }))
    ])
  ]);

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

于 2017-02-10T11:45:44.890 回答
0

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

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

于 2022-02-19T14:25:45.580 回答
-5

你不能用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>
于 2017-02-10T10:47:58.710 回答