angularsassangular-animations

Angular animations not applying to child elements


I'm new to angular animations and was following a guide on how to animate an item. This is the template

    <div 
        #header        
        [@nav-header-animate] = "{
            value: isLoggedIn(),
            params: {
                startHeight: header.clientHeight
            }
        }"
        class="nav-header">
        @switch(isLoggedIn()){
            @case(true){
                <h1 class="title-logged-in">{{ title }}</h1>
            }
            @case(false){
                <h1 class="title-not-logged-in">{{ title }}</h1>
            }
        }
    </div>

This is the animation

  animations: [
    trigger('nav-header-animate', [
      transition('* => *', [
        query(':self', [
          style({height: '{{startHeight}}px'})
        ]),
        query(':enter', [
          style({opacity: 0, transform: 'scale(0.9)'})
        ]),
        query(':leave', [
          style({opacity: 1, transform: 'scale(1)'}),
          animate('150ms ease-in', style({opacity: 0, transform: 'scale(0.9)'}))
        ]),
        group([
          query(':self', [
            animate('150ms ease-in', style({height: '*'}))
          ]),
          query(':enter', [
            animate('150ms ease-in', style({opacity: 1, transform: 'scale(1)'}))
          ])
        ])
      ], {params : {startHeight: 0}})
    ])
  ]

and these are the relevant scss classes

.nav-header{
    display: flex;
    padding: 0;
    padding-left: 1rem;
}
.title-not-logged-in{
    font-size: 5rem;
    margin-top: 30%;
}
.title-logged-in{
    font-size: 1.5rem;
}

and this is how isLoggedIn is calculated

tokens = this.store.selectSignal(selectTokens);
isLoggedIn: Signal<boolean> = computed(() => this.tokens().accessToken !== null);

for the purpose of testing this out I am using a toggle to switch the access token between null and a string.

the height of the nav-header is animating fine. But the animations for opacity and scale are not applied on the h1 tags at all. Once the animation starts it displays both the h1 tags, and when it ends the initial h1 tag is removed. I am using angular 20. Any help is greatly appreciated.


Solution

  • Solved the issue. The parent of this component had an animation on it, and as I found out while going through to doc, animations on parent block animations on child unless explicitly disabled. I tried that still did not work in my case. So I moved a couple of things around and merged both animations into one. Started working great.