2

This code is currently working for me but I got to this solution from trial and error and playing with the stagger() method.

Is there a cleaner way to implement this?

Ideally I'd just use an *ngIf but the elements are image heavy and the opacity animation is choppy from loading the images each time the element is rendered.

Ultimately what I am trying to accomplish is: 

display: none + opacity: 0 -> display block + opacity: 1;

However I know that display can't be animated. So I am trying to stagger it to change to none after the opacity: 0. And then trigger display: block before the opacity is animated to opacity: 1

trigger('fade', [
  state('hidden', style({ display: 'none', opacity: 0 })),
  state('shown', style({ display: 'block'})),
  transition('shown => hidden', [
    query(':self', [
      animate('250ms ease')
    ])
  ]),
  transition('hidden => shown', [
    query(':self', [
      animate('250ms ease'),
      stagger(250, [
        animate('250ms ease', style({ opacity: 1 }))
      ])
    ])
  ])
])

I am calling it in the template with:

[@fade]="displayState === 'shown' ? 'shown' : 'hidden'"

Reed
  • 1,515
  • 1
  • 21
  • 38
  • 1
    Hi can you put your code on stackblitz so we can help you further. – davecar21 Feb 14 '19 at 06:44
  • Two questions: Going only for opacity is not the solution, because of performance? And did you try your solution with visibility and not display: none? According to https://csstriggers.com/ has the most impact to animate. – Jonathan Stellwag Feb 25 '19 at 00:54
  • Only opacity causes it to still take up block spacing on the page and affect alignment of other elements. – Reed Feb 28 '19 at 16:13

0 Answers0