Question

//animation
export const hiddenFade = trigger('hiddenFade', [
  transition('void => *', [
    animate('300ms', keyframes([
      style({opacity: 0}),
      style({opacity: 0.5}),
      style({opacity: 1}),
    ]))
  ]),
   transition('* => void', [
    animate('300ms 1s', keyframes([
      style({opacity: 1}),
      style({opacity: 0.5}),
      style({opacity: 0}),
    ]))
  ])
])

//component
isCheckForm: boolean = true;

// HTML

<div class="form-group" *ngIf="!isCheckForm" [@hiddenFade]  (@hiddenFade.done) = 'isCheckForm = true'>
  <label class="col-sm-10 col-sm-offset-2  text-danger">{{showWarningText}}</label>
</div>

我想要效果的是当执行void =＆gt;时isCheckForm变为false时*这个动画结束后这个动画isCheckForm是真的做* =＆gt; void动画慢慢消失，但动画没有消失

Answer 1

您的HTML应如下所示，我认为不需要@hiddenFade.done ：

<div class="form-group" *ngIf="!isCheckForm" [@hiddenFade]="isCheckForm" (@hiddenFade.done)="isCheckForm = true">
  <label class="col-sm-10 col-sm-offset-2  text-danger">{{showWarningText}}</label>
</div>

angular2动画回调改变值不起作用

1 个答案: