Question

我正在取消Angular2 @ angular / core 2.2.1并且我想触发我的＆＃34;糟糕的凭据＆＃34;动画多次，每次凭证都不好。

继承我的想法：

@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更改为另一个随机字符串才能触发动画？

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

Answer 1

使用@wrongCredentials很好，但我会将其设置为等于＆＃39; wrongCredentials＆＃39;以外的其他内容。比如州，因为你使用wrongCredentials做其他事情。然后，只要您想在doLogin（）函数中的状态之间切换，请调用this.state =＆＃39; active＆＃39;或者＆＃39;不活跃＆＃39;然后为每个州使用动画。

<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

最好的运气！

Angular2动画触发器

1 个答案: