代码之家 › 专栏 › 技术社区 › Night Train David Hoffman

形状错误时触发角度动画

angular-animations angular-forms angular5 animation angular

Night Train David Hoffman · 技术社区 · 6 年前

当用户试图发送输入错误的表单时,我试图给他一个视觉反馈。因此,如果表单包含错误,我想在他尝试发送表单时设置输入字段的动画。

ts文件中的动画:

trigger('error', [
      transition('* => *', useAnimation(shake)),
      ]),

html文件中的表单:

<mat-form-field [@error]="error">

每次用户尝试发送表单时,如果表单包含错误,是否可以触发此动画?

StackBlitz example (Updated with solution)

正如您所看到的,抖动动画在开始时播放,然后不再播放。

解决方案:

根据下面的答案,我更改了设置 onAddErrAnim 变量现在 onAddErrAnim公司 设置为 false 首先,然后 if 语句在 setTimout 0毫秒。现在用户可以调用 onAdd() 每毫秒播放一次,动画播放到最后(如果未触发新动画)。

onAdd() {
  this.onAddErrAnim = false;

  setTimeout( () => {

    if (this.myFormControl.invalid) {
      this.onAddErrAnim = true;
      return;
    } else {
      this.myArray.unshift([this.inputExample]);
    }

  }, 0 )

}

1 回复 | 直到 6 年前

Yerkon 6 年前

我更新了您的 code example :

<div class="example-container" >
  <mat-form-field 
    floatPlaceholder="never" 
    class="input-box" 
    style="width: 100%" 
    (keyup.enter)="onAdd()"
    [@error]="myFormControl.invalid">

@error 将在表单无效时触发。

加载页面时仍会调用动画。我如何避免这种情况?

CODE EXAMPLE 2 (UPDATED) 。

而且我希望动画只在onAdd()上触发作用

我在component类中创建了animationState属性:

animateError = 'false';

并将其绑定到 [@error] 触发根据from状态的更改,它将触发相应的动画。

从…起 false => true 在模板文件中:

 ...
 transition('false => true', useAnimation(shake)),

模板内部:

[@error]="animateError">

当 onAdd() 函数,它通过验证 myFormControl :

    onAdd() {
    if (this.myFormControl.invalid) {
      this.animateError = 'true';
       // after animation is done, restore the initial state
       setTimeout(() => {
          this.animateError = false;
       }, 500);

      return;
    } else {
      this.animateError = 'false';
    }
    console.log(this.myFormControl);
    this.myArray.unshift([this.inputExample]);

  }

2018年3月19日更新:

通过替换动画状态的 string 变量至 boolean :

 trigger('error', [
      state('0', style({})),
      state('1', style({})),
      transition('0 => 1', useAnimation(shake)),
    ]),

。。。

 animateError = 'false'; =>  animateError = false;

难道不应该有一种更有效的方式来触发动画吗不在变量中保存布尔值?

在这种情况下,使用自定义 动画状态 我们需要把国家价值保存在某个地方。它可能位于组件类、数据模型类。。。因为在您的特定情况下,我们需要手动控制动画(需要触发动画只有什么时候 onAdd() 函数)。