角度动画：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的position: relative 。

Answer 2

您可以添加以下内容：

.title, .comment{
  position:relative;
}

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

见叉