1

I have a case where I have an inner menu which is rendered by ngIf, in this menu I have switch cases. I tried to make an animation (that works in other projects) but not here, only the enter event is happening, the leave event is not fired, the content just disappears.

I tried to put the animation on each switch case but it didn't work as well also tried fade animation, same result 

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>
Asaf Bello
  • 91
  • 4
  • On enter, the animation will show because animation is happening after element enters to dom. But on leave state, the element is not in the dom, so the animation doesn't work. I recommend you to share with us working example of your component, and also please take a look on this https://stackoverflow.com/questions/36417931/angular-2-ngif-and-css-transition-animation/39356145#39356145 – Asaf Hananel Dec 11 '18 at 18:34

0 Answers0