Question

我正在尝试使用层次结构创建一个包含不同目录的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似乎也无法正常工作，因为子目录容器不是隐藏在父目录下面而是悬停在它上面。

Answer 1

动画工作得很好，问题是材料2给了md-list-item一些奇怪的位置，这就是为什么z-index不起作用。

角2动画。样式在过渡期间不适用

1 个答案: