动画 css 在 ngIf 上使用它

Question

我有一个这样的测试按钮来检查是否一切正常：

<div animates #animation="animates" text-center>
   <button ion-button (click)="animation.start({type: 'fadeOutLeft', duration: '1000'})">Click me!</button>
</div>

但我想要实现的是将这个动画设置在 ngif 我想让第一个元素消失 fadeOutLeft 动画下面的代码 ngIf

<ion-scroll scrollX="true">
   <div *ngIf="!clicked">
     <div class="availability-btn-wrapper" *ngFor="let availableDaysBtn of availableDays" (click)="getDay(availableDaysBtn)">
        <button ion-button round outline>{{ availableDaysBtn }}</button>
     </div>
   </div>
   <div *ngIf="clicked">
       <div class="availability-btn-wrapper" *ngFor="let availableTimeBtn of availableTimes" (click)="getTime(availableTimeBtn)">
           <button ion-button round outline>{{ availableTimeBtn }}</button>
       </div>
   </div>
</ion-scroll>

我想在第一个 ngIf="!clicked" 添加这个动画，它随着那个动画一起消失希望有人能帮助我

Answer 1

Angular 动画为您提供了很好的过渡挂钩。对于你的情况，如果你想在 div 消失时制作动画，你应该在 :leave 挂钩上注册你的动画。然后当ngIf中的表达式被执行，特定的HTML即将被隐藏时，注册在:leave上的动画将被执行。

Check out this guide，然后搜索我上面提到的休假。

动画 css 在 ngIf 上使用它

animate css use it on a ngIf

ionic3

ng-animate

animate.css