Question

我正在尝试在Angular 7应用程序中做一件简单的事情。

基本上，我有一个标题，当我单击它时，注释将从上方ease-in放置在标题下方。问题是，当评论移动时，它会显示在标题上方。

我尝试在CSS上添加一个z-index属性以提升标题但无济于事。

app.component.ts

import { Component } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})
export class AppComponent  {
  visible = false;

  showMessage() {
    this.visible = !this.visible;
  }
}

app.component.html

<div (click)="showMessage()">
    <div class="title">Click here to reveal the comment</div>
    <div class="title">25/04/2019 17:30:00</div>
    <div class="comment" *ngIf="visible" [@slideInOut]>Lorem ipsum...</div>
</div>

app.component.css

.title {
  background-color: aqua;
  z-index: 1000;
  cursor: pointer;
}

.comment {
  background-color: red;
  z-index: 0;
}

我创建了一个StackBlitz来显示问题。

感谢您的帮助！

Answer 1

为了z-index工作。您需要向元素添加position: relative或absolute。您也可以在{title中添加position: relative。

Answer 2

您可以添加以下内容：

.title, .comment{
  position:relative;
}

z-index仅适用于定位的元素（位置：绝对，位置：相对，位置：固定或位置：粘性）。

请参见Fork

角度动画：div在另一个div后面输入

2 个答案: