Angular Animation on child animation not transitioning

Question

I have a child animation nested inside of my parent animation. The parent animation is preventing the child from transitioning. The change is triggered, but there is no transition. How do I make this transition happen and both animations trigger at the same time?

animations.ts

import {
  trigger,
  style,
  transition,
  animate,
  state
} from "@angular/animations";

export const Animations = {
  animations: [
    trigger('expansionTrigger', [
      state('true', style({
        height: '*'
      })),
      state('false',  style({
        height: 0
      })),
      transition('false <=> true', animate(3000))
    ]),
    trigger('colExpansion', [
      state('true', style({
        "-webkit-box-flex": "0",
        flex: "0 0 66.66667%",
        "max-width": "66.66667%"
      })),
      state('false',  style({
        "flex-basis": "0",
        "-webkit-box-flex": "1",
        "flex-grow": "1",
        "max-width": "100%"
      })),
      transition('false <=> true', animate(3000))
    ])
  ]
};

content.component.html

<div [@expansionTrigger]="isExpanded === 'true' ? 'true' : 'false'">
 <div [@colExpansion]="isExpanded === 'true' ? 'true' : 'false'"></div>
</div>

Angular Animation on child animation not transitioning

0 Answers0