角度动画：div 进入另一个 div答案

【问题标题】：Angular Animations: div enter behind another div角度动画：div 进入另一个 div
【发布时间】：2019-08-30 12:27:07
【问题描述】：

我正在尝试在我的 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 来显示问题。

感谢您的帮助！

【问题讨论】：

标签： html css angular animation

【解决方案1】：

您可以添加以下内容：

.title, .comment{
  position:relative;
}

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

见Fork

【讨论】：

【解决方案2】：

为了z-index工作。您需要将position: relative 或absolute 添加到元素中。在您的情况下，还将 position: relative 添加到 .title。

【讨论】：