Question

在某些情况下，我有一个由ngIf呈现的内部菜单，在此菜单中，我有一些开关盒。我试图制作一个动画（在其他项目中也可以使用），但不是在这里，只有enter事件正在发生，leave事件没有触发，内容只是消失了。

我尝试将动画放在每个开关盒上，但效果不佳还尝试了淡入淡出动画，结果相同

export let slideDown2 = trigger('slideDown2', [
  transition(':enter', [
    style({ 
      height: 0,
      paddingTop: 0,
      paddingBottom: 0, 
    }),
    animate(300)
  ]),

  transition(':leave', [
    style({ 
      height: '*',
      paddingTop: '*',
      paddingBottom: '*', 
    }),
    animate(300)
  ]),


export let fadeInAnimation = animation([
  style({ opacity: 0 }),
  animate('{{ duration }} {{ easing }}')
], {
  params: {
    duration: '300ms',
    easing: 'ease-out'
  }
});

export let fade = trigger('fade', [

  transition(':enter', 
    useAnimation(fadeInAnimation)
  ),

  transition(':leave', [ 
    animate(200, style({ opacity: 0 }))
  ])
])

;

    <div *ngIf="filter.isExpanded" 
            class="MenuesContainer"    
            [ngSwitch]="filter.title" 
            (click)="$event.stopPropagation()"
            [class.changePosition] = "openedTab > 2"
            @slideDown2 
             >

    <div *ngSwitchCase="'Salon Services'" class="innerMenu servicesFilter">
      //// content///
    </div>

    <div *ngSwitchCase="'Add-On Services'" class="innerMenu" >
     //// content///
    </div>

    <div *ngSwitchCase="'Distance'" class="innerMenu distanceFilter" >
    //// content///
    </div>
  </div>

Angular 6动画不适用于ngswitch

0 个答案: