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.

Continue reading...