如何在 Angular2 中的元素模型(文本)更改时对其进行动画处理

Question

每当Ionic 2(Angular 2)项目中的文本发生变化时，我都会尝试为值设置动画。这是在Ionic2项目中，但对于任何Angular2都应该相同。

我在标记中有以下内容。。

<ion-list no-lines>
<ion-item *ngFor="let item of data>
<ion-card [@flyInOut]='cardState'>
<ion-card-content>
<div ><b>{{item.name.description}}</b></div>
<div [@valueUpdated]='item.lastname.description'>{{item.lastname.description}}</div>
<div>{{item.value}}</div>
</ion-card-content>
</ion-card>
</ion-item>
</ion-list>

以及组件中的以下触发器。。

trigger('valueUpdated',[
state('void => *',style({
backgroundColor:'red'
})),
state('* => void',style({              
backgroundColor:'green'
})),
transition('active => inactive', animate('100ms ease-in')),
transition('inactive => active', animate('100ms ease-out'))
])

我只是在这里使用颜色进行测试，最终我希望它更改颜色(然后更改回)，或者将旧值"弹出"改为"弹出"(类似于Angular文档中的示例。

然而，在此之前，我只是想看看这是否可能。我是刚开始玩动画的，所以也许我偏离了轨道？

有可能做到这一点吗？如果有，如何做到？

非常感谢您的帮助！

[更新]

我已经接近以下内容，使用translateX fot测试而不是颜色更改(因为这更容易看到)。。。

trigger('valueUpdated', [   
state('* => *', style({ transform: 'translateX(0)' })),       
transition('* => *', [      
animate(2000, style({ transform: 'translateX(100%)'  }))
])
]),

当第一次添加元素时，我看到上面动画化的translateX正在发生，但状态发生了变化，即item.name.description发生了更改，div直接拍摄到translateX(100%)，然后返回到translateX(0)，translateX没有动画(100%)。

[更新2]

我发现有东西离我更近了。。

trigger('valueUpdated', [   
state('void => *', style({ transform: 'translateX(0)' })),       
transition('void => *', []),
transition('* => *', [      
animate(2000, style({ transform: 'translateX(100%)'  }))
])
]),

添加void => *状态和过渡会在首次添加元素时停止动画。现在，它只在文本从初始值第一次更改时设置动画，而不是在任何后续时间，因此仍然不正确。

Answer 1

我解决了这个问题：诀窍是使用带有内容的变量作为动画状态，而不是单独的变量。因此，当内容发生更改时，Angular将其视为动画状态的修改，并开始播放*=>*规则

我创建了一个单独的文件组件来帮助每个人检查这一点：

import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, Input } from '@angular/core';
export const fadeInOutTimeout = 250;
export const fadeInOut = trigger('fadeInOut', [
transition('void => *', [style({ opacity: '0', transform: 'translateX(-10%)' }), animate(fadeInOutTimeout)]),
transition('* => void', [animate(fadeInOutTimeout, style({ opacity: '0' }))]),
transition('* => *', [
style({ opacity: '0', transform: 'translateX(-10%)' }),
animate(fadeInOutTimeout, style({ opacity: '1', transform: 'translateX(0%)' })),
]),
]);
@Component({
selector: 'app-animated-text',
template: `
<div [@fadeInOut]="text" *ngIf="text != null">
{{ text }}
</div>
`,
styles: [],
animations: [fadeInOut],
})
export class AnimatedTextComponent {
@Input() text: string;
}

请注意<div[@fadeInOut]="；文本">-这就是我们将文本本身用作动画状态的地方。

要使用此组件，只需在父组件中添加以下内容：

<app-animated-text [text]="myText"></app-animated-text>

因此，每当myText变量发生变化时，该组件都会通过隐藏旧文本和淡入来设置转换的动画；将新文本空运入

Answer 2

以下是我所做的。动画在每次更改值时都会发生，但在创建时不会发生。您可以添加任意数量的style项目。偏移量类似于动画持续时间的百分比。在下面的示例中，背景和文本颜色立即变为黄色和红色，然后慢慢变回原来的颜色。

trigger(
'valueChanged',
[
transition('void => *', []),   // when the item is created
transition('* => void', []),   // when the item is removed
transition('* => *', [         // when the item is changed
animate(1200, keyframes([  // animate for 1200 ms
style ({ background : '#FFD900', color: '#FF5500', offset: 0.0 }),
style ({ background : 'inherit', color: 'inherit', offset: 1.0 }),
])),
]),
]),

HTML代码：

<div [@valueChanged]="onCount">
{{onCount}}
</div>