0

我正在取消 Angular2 @angular/core 2.2.1 并且我想多次触发我的“坏凭据”动画，每次凭据都不好。

这是我的想法：

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  animations: [
    trigger('wrongCredentials', [
      transition('* => *', [
        animate(300, keyframes([
          style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
          style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
          style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
        ]))
      ])
    ])
  ],
})
export class LoginComponent {

    wrongCredentials = "shown";

    doLogin() {

        let contentHeaders = new Headers();
        contentHeaders.append('Accept', 'application/json');
        contentHeaders.append('Content-Type', 'application/json');

        let data = {
          username: this.username,
          password: this.password
        };

        this.http.post(BackendUrl + '/auth', JSON.stringify(data), {headers: contentHeaders})
          .map(res => res.json())
          .subscribe(
            data => {

              localStorage.setItem('id_token', data.token);
              this.router.navigate(['dashboard']);

            },
            err => {
              console.log(err);
              this.wrongCredentials = "" + new Date().getTime();
              console.log(this.wrongCredentials);
            },
            () => console.log('Authentication Complete')
          );

      }

}

和 html

<div class="auth">

  <div class="auth-container">
    <div class="card" [@wrongCredentials]="wrongCredentials">
      <div class="auth-header">
        <h1 class="auth-title">{{title}}</h1>
      </div>
      <div class="auth-content">
        <p class="text-xs-center">LOGIN TO CONTINUE</p>
        <form (ngSubmit)="doLogin()" novalidate="">
          <div class="form-group">
            <label>Username</label>
            <input [(ngModel)]="username" name="username" class="form-control underlined"  placeholder="Your username" required>
          </div>
          <div class="form-group">
            <label>Password</label>
            <input [(ngModel)]="password" name="password" type="password" class="form-control underlined" placeholder="Your password" required>
          </div>
          <div class="form-group">
            <label>
              <input class="checkbox" type="checkbox">
              <span>Remember me</span>
            </label>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-block btn-primary">Login</button>
          </div>
        </form>
      </div>
    </div>
  </div>

</div>

现在的问题是如何多次触发动画。因此我必须更改wrongCredentials为另一个随机字符串来触发动画？

还有其他想法如何通过函数调用直接触发动画吗？

4

1 回答 1

0

使用@wrongCredentials 很好，但我会将它设置为等于“wrongCredentials”以外的其他值，例如状态，因为您正在使用errorCredentials 做其他事情。然后，每当您想在 doLogin() 函数中的状态之间切换时，调用 this.state = 'active' 或 'inactive' 然后为每个状态使用动画。

<div class="card" [@wrongCredentials]="state">

您的动画可能看起来像这样。

animations: [
trigger('wrongCredentials', [
        state('inactive', style({
            //what to do when not shown
    })),
        state('active',   style({
            //what you want it to do when shown
    })),
    transition('inactive => active', animate(300, keyframes([
      style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
      style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
      style({opacity: 1, transform: 'translateX(0)',     offset: 1.0}),
    transition('active => inactive', animate('//add reverse animation or display: unset is what I used'))
    ])
]

doLogin() {
    ...
    err => {
       this.state = 'active';
       console.log(err);
       this.wrongCredentials = "" + new Date().getTime();
       console.log(this.wrongCredentials);
    }
}

我从本教程中获得了帮助： https ://coursetro.com/posts/code/25/Understanding-Angular-2-Animations-Tutorial

祝你好运！

于 2017-02-28T17:00:55.590 回答