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

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添加到元素中。在您的情况下，还将position: relative添加到.title。

Answer 2

您可以添加以下内容：

.title, .comment{
  position:relative;
}

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

见Fork