0

我正在尝试在分层结构中创建具有不同目录的 sidenav 菜单。它有两个动画，一个是显示目录是否打开的指针，一个是在打开子目录时向下滑动，在关闭时向上滑动的动画。这是 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>

这是我在 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);
  }

}

我的问题是即使应用了 opacity 和 translateY 样式，zIndex 似乎也无法正常工作，因为子目录容器没有隐藏在父目录下，而是悬停在它上面。

4

1 回答 1

0

动画效果很好，问题是材料 2 给了 md-list-item 一些奇怪的位置，这就是 z-index 不起作用的原因。

于 2017-03-17T17:16:16.183 回答