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'))
   ])

我只是在这里使用颜色来测试，最终我希望它改变颜色（然后改回），或者可能有旧的值“flyout”和新的“flyin”（类似于示例）在Angular documentation.

中

然而，在此之前，我只是想看看这是否可行。我是动画片的新手，所以也许我正好偏离轨道？

是否可以这样做，如果是这样，怎么办？

任何帮助都非常感谢！

[UPDATE]

我已经接近以下内容，使用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％），所以仍然不太正确。

[UPDATE2]

我发现有些事情更接近......

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

添加void => *状态并且转换停止了首次添加元素时发生的动画。现在只有当文字第一次从其初始值而不是随后的任何时间更改时才会显示动画，所以仍然不对。

Answer 1

这就是我的工作。每次更改值时都会发生动画，但每次创建时都不会发生动画。您可以根据需要添加任意多个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>

Answer 2

我解决了问题：诀窍是使用带有内容的变量作为动画状态，而不是单独的变量。因此，当内容更改时，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;
}

请注意

-这是我们将文本本身用作动画状态的地方。

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

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

因此，每当myText变量更改时，该组件就会通过隐藏旧文本以及使新文本淡入淡出并浮动其中来动画化过渡。

如何在模型（文本）更改时为Angular2中的元素设置动画

2 个答案: