typescript Angular 2 - 动画过渡不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42156117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 - Animation transition not working
提问by FlorisdG
I need a transition between 2 colors OnClick. Right now, this is my code:
我需要 2 种颜色之间的过渡OnClick。现在，这是我的代码：
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
HTML
<li [@menubarState]="menuActive" (click)="onMenuClick()">
<a><span class="material-icons icon">apps</span></a>
</li>
This does change the background-coloras it should. The change, however, is instant instead of a transition.
这确实改变了background-color它应该的。然而，这种变化是即时的，而不是过渡。
I am using the Chrome, latest version.
我正在使用最新版本的 Chrome。
回答by Aaron Krauss
This bit me for the longest time, and what fixed it was changing my state variable from a boolean type to a string type. So - instead of tracking trueand false, track 'true'and 'false'. Per Angular's docs:
这让我困扰了最长时间，修复它的方法是将我的状态变量从布尔类型更改为字符串类型。所以 - 而不是跟踪true和false，跟踪'true'和'false'。根据 Angular 的文档：
An animation state is a string value that you define in your application code.
动画状态是您在应用程序代码中定义的字符串值。
Change your MenubarComponent class to this:
将您的 MenubarComponent 类更改为：
export class MenubarComponent {
menuActive: string = 'false';
onMenuClick () {
if (this.menuActive === 'false') {
this.menuActive = 'true';
} else {
this.menuActive = 'false';
}
}
}
I think it's dumb. Booleans are obviously good options for binary states.
我认为这是愚蠢的。布尔值显然是二进制状态的好选择。
More info: https://angular.io/guide/animations#states-and-transitions
更多信息：https: //angular.io/guide/animations#states-and-transitions
回答by I. Buchan
Expanding on the answer that Aaron Krauss provided. It is having issues with the direct interpretation of the true / false values; however, if you would rather not reference a string context, you can replace true and false in the above with the numbers 1 (true) and 0 (false). This proved to fix my issue and didn't require any annoying string interpretations.
扩展 Aaron Krauss 提供的答案。它在对真/假值的直接解释方面存在问题；但是，如果您不想引用字符串上下文，则可以将上面的 true 和 false 替换为数字 1（真）和 0（假）。这证明解决了我的问题，并且不需要任何烦人的字符串解释。
trigger('menubarState', [
state('0', style({backgroundColor:'#43a047'})),
state('1', style({backgroundColor:'#333'})),
transition('0 => 1', animate('1s')),
transition('1 => 0', animate('1s'))
])
回答by Hetty de Vries
Expanding even more on Aaron Krauss' answer: I don't want to transform my booleans into strings, so I defined a getter:
进一步扩展 Aaron Krauss 的回答：我不想将我的布尔值转换为字符串，所以我定义了一个 getter：
public menuActive: boolean = false;
get menuState() {
return this.menuActive ? 'active' : 'inactive'
}
And then in your animation definition (I merged the transitions since they are the same):
然后在你的动画定义中（我合并了过渡，因为它们是相同的）：
animations: [
trigger('menubarState', [
state('inactive', style({backgroundColor:'#43a047'})),
state('active', style({backgroundColor:'#333'})),
transition('inactive <=> active', animate('1s'))
])
]
And to be complete, the template:
为了完整，模板：
<li [@menubarState]="menuState" (click)="onMenuClick()">
<a><span class="material-icons icon">apps</span></a>
</li>
回答by Shubham Verma
I have used animation while routing/clicking in angular 2.It works for onClick also. Use this code for all types of routing, You can use separate animation for separate route change or onclick.
我在 angular 2 中路由/单击时使用了动画。它也适用于 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%)'
}))
])
]);
You can also modify the above code according to your choice.
也可以根据自己的选择修改上面的代码。
回答by Linushg111
Can't you use CSS?
你不能使用 CSS 吗？
EX:
前任：
<!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>
