I am trying to create a sidenav menu with different directories at hierarchical structure. It has two animations one of roteiting the pointer that displays whether or not the directory is open, and an animation sliding down at opening of child directories and sliding up at closing. Here is the code of the directory.component.html
<a md-list-item class="flex-container" fxLayout="row">
<md-icon (click)="directory.open = !directory.open" [@pointerState]="directory.open?'opened':'closed'">
{{'keyboard_arrow_right'}}
</md-icon>
<md-icon>{{directory.icon}}</md-icon>
<a routerLinkActive="active" [routerLink]="directory.href">{{directory.title}}</a>
</a>
<div *ngIf="directory.open && directory.childDirectories"
class=child-directories
[@directoryState]="directory.open ? 'opened':'closed'">
<my-directory
*ngFor="let iDirectory of directory.childDirectories"
[directory]="iDirectory">
</my-directory>
</div>
Here is how i discribe the animations at my directory.component.ts
@Component({
selector: 'my-directory',
moduleId: module.id,
templateUrl: './directory.component.html',
animations: [
trigger('pointerState', [
state('opened', style({transform: 'rotateZ(90deg)'})),
state('closed', style({transform: 'rotateZ(0deg)'})),
transition('opened <=> closed', animate(250))
]),
trigger('directoryState', [
state('opened', style({
transform: "translateY(0)",
zIndex: 2,
opacity: 1
})),
transition('* => void', [
style({
zIndex: 1
}),
animate(250, style({
transform: 'translateY(-100%)',
opacity: 0
}))
]),
transition('void => *', [
style({
zIndex: 1,
transform: 'translateY(-100%)'
}),
animate(250)
])
])
]
})
export class DirectoryComponent implements OnInit {
@Input('active-user')
private user:User;
@Input()
private directory:Directory;
ngOnInit():void {
if (this.user) this.directory = Directory.constructFromUser(this.user);
}
}
My problem is even thou the opacity and translateY styles are applied the zIndex does not seem to work properly, because instead of hiding beneath the parent directory, child directories container hovers over it.
