Animation :enter :leave not firing for @ngIf inside ng-content

Question

So I have this component. Let's call it AnimationComponent:

<div
  id="{{id}}"
  [@defaultAnimationSet]='animationState'
  (@defaultAnimationSet.start)="onAnimationStart($event)"
  (@defaultAnimationSet.done)="onAnimationEnd($event)">
  <ng-content></ng-content>
</div>

where the animation state is set automatically, based on the type provided as prop. animationState flips between 'default' and the type you provide as prop. Say you provided opacity, it'll flip between 'default' and 'opacity'.

Now I use this AnimationComponent here:

<app-animation [type]='activeTransitionType'>
  <div class='content' *ngIf='showContent'>
    Some content here!
  </div>
</app-animation>

Here's one of the animations I have in defaultAnimationSet:

const opacityEnterAnimation = animation([
  query(':enter', [
    style({ opacity: 0 }),
    animate('1s', style({ opacity: 1 }))
  ], { optional: true })
]);

const opacityLeaveAnimation = animation([
  query(':leave', [
    animate('0.25s',
      style({ opacity: 0 })
    ),
  ], { optional: true })
]);

const opacityAnimation = [
  state('opacity', style({ opacity: 1 })),
  transition('void => opacity', [
    useAnimation(opacityEnterAnimation)
  ]),
  transition('opacity => void', [
    useAnimation(opacityLeaveAnimation)
  ])
];

export const defaultAnimationSet = [
 ...opacityAnimation
];

Expected: Apply the opacity enter and leave animation on the *ngIf content transcluded within this component.
Actual: Doesn't work at all! The :enter and :leave seems to find the entered / left content, but doesn't apply the transitions on them.