Css 角度：动画显示卡位于另一张卡的顶部

Im使用angular animation builder创建动画。我有一个网格列表和一张卡片列表。当我点击一个按钮时，我希望另一个div出现在初始卡的顶部（从左侧浮动以覆盖第一张卡） ).到目前为止，div附带动画，但显示在初始卡片的一侧。我制作了一个stackblitz示例来显示当前的进度。下面是我的stackblitz：

还将代码粘贴到此处：

import { Component,OnInit,ElementRef } from '@angular/core';
import { trigger, state, style, transition, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';

export class Asset
{
  constructor(public name:string,public description:string){};
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  assets:Asset[]=[];
  cards=[];
  private player: AnimationPlayer;

  constructor(private animationBuilder:AnimationBuilder,
  private elRef:ElementRef
  ){}

  ngOnInit(){
    this.setAssets();
    this.setswitch();
  }

  setAssets(){
    this.assets.push(new Asset("Asset1","Latest1"));
    this.assets.push(new Asset("Asset2","Latest2"));
    this.assets.push(new Asset("Asset3","Latest3"));
    this.assets.push(new Asset("Asset4","Latest4"));
    this.assets.push(new Asset("Asset5","Latest5"));
    this.assets.push(new Asset("Asset6","Latest6"));
    this.assets.push(new Asset("Asset7","Latest7"));
    this.assets.push(new Asset("Asset8","Latest8"));
    this.assets.push(new Asset("Asset9","Latest9"));

    for(var i=0; i<this.assets.length;i++){
    console.log(this.assets[i].name);
    }
  }

    setswitch() {
    for (let i = 0; i < this.assets.length; i++) {
      let cardshow = {
        id: i.toString(),
        isShow : false
      };
      this.cards.push(cardshow);

    }
      console.log(this.cards);
  }

  animate(i){
    this.cards[i].isShow=true;
    let animationFactory;
      animationFactory = this.animationBuilder
        .build([
          style({ width: '0' }),
          animate(200, style({ width: 200 }))
        ]);  
  let elem:Element = document.getElementById("div"+(i));
  console.log("Elament",elem);
  console.log("INDEX",i);
  this.player = animationFactory.create(elem);
  this.player.play();

  }
}

编辑：我需要将另一张卡完全隐藏在传入卡下。此外，单击传入卡内的按钮后，动画应撤消（该卡应缩回）。我现在做的也是增加宽度。我所期望的是，新卡应该从左边进来，就像我们在抽屉里看到的那样

app.component.css将成为：

p {
  font-family: Lato;
}

.border{
  border:1px solid black;
  padding-left: 20px;;
  padding-right:20px;
  background: #ffe6ea;
}

.hide{
  display:none;
}

.borderPopUp{
  padding-left: 20px;;
  padding-right:20px;
  position:absolute;
  background:#d3d3d3d4;
  animation: openLikeDrawer 800ms ease-in-out;
  width:50%;
  left:20%;
}

@keyframes openLikeDrawer{
  from {left:0px; }
  to { left: 20%; }
}

app.component.html将：

<div>
    <mat-grid-list cols="3" rowHeight="3:1">
        <mat-grid-tile *ngFor="let asset of assets; index as i">
            <div class="border">
                <p>{{asset.name}} </p>
                <p>{{asset.description}} </p>
                <button (click)="asset.isShow = true">click</button> 

      </div>

      <div *ngIf="asset.isShow" class="borderPopUp" >
        <p>{{asset.description}} </p>
        <button (click)='asset.isShow = false'>click</button>
      </div>

    </mat-grid-tile>
  </mat-grid-list>
</div>

{{asset.name}

{{asset.description}}

点击
{{asset.description}}

点击

这是我的最终解决方案：

import { Component, OnInit } from '@angular/core';
import { LearningContentService } from '../../../service/learningcontent.service';
import { ActivatedRoute } from '@angular/router'

import { trigger, style, transition, animate, keyframes, query, stagger } from '@angular/animations';

export class Asset {
  name: string;
  description: string;
  cardtoggle:boolean=false;
  constructor(rawObj: any) {
    this.name = rawObj.name;
    this.description = rawObj.description;
    this.cardtoggle = rawObj.cardtoggle;

  }
}

@Component({
  selector: 'app-catalogue',
  templateUrl: './catalogue.component.html',
  styleUrls: ['./catalogue.component.scss'],
  animations: [
    trigger('listAnimation', [
      transition('* => *', [

        query(':enter', style({ opacity: 0 }), { optional: true }),

        query(':enter', stagger('50ms', [
          animate('1s ease-in', keyframes([
            style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }),
            style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
            style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
          ]))]), { optional: true })
      ])
    ],
    ),
  ]
})
export class CatalogueComponent implements OnInit {
  assets: Array<Asset> = [];

  constructor(private route: ActivatedRoute,
    private learningService: LearningContentService,
  ) {

  }

  ngOnInit() {
    this.loadAssets();

  }


  loadAssets() {
    this.learningService.assets().subscribe((res: any) => {
      const datas: Array<any> = res;
      datas.forEach(asset => this.assets.push(new Asset(asset)));
      console.log(this.assets);
    });
  }

  animate(asset) {
    asset.cardtoggle = true;
  }
  close(asset) {
    asset.cardtoggle = false;
  }
}

---

你能不能让它更像我需要的。我需要将另一张卡完全隐藏在传入卡下。另外，在单击传入卡内的按钮后，动画应撤消（该卡应缩回）…我现在正在做的是增加宽度。我希望新卡应该从左边进来，就像我们在抽屉里看到的那样，我分享你想用角度动画。。。不这样做怎么样？但是纯角度的？你能检查一下我更新的stackblitz并告诉我你对它的理解吗。它还有一些逻辑错误需要纠正观察（1）太多代码用于简单的东西。。。（2） 如果我打开然后关闭cell2。。。之后，如果我打开任何单元格，单元格2将再次可见。。。这是一个破坏预期逻辑的东西。。。考虑使用渲染器代替EntEntReF进行DOM操作（但是如果您可以使用不同的应用程序设计，则最终避免两者）

<div>
    <mat-grid-list cols="3" rowHeight="3:1">
        <mat-grid-tile *ngFor="let asset of assets; index as i">
            <div class="border">
                <p>{{asset.name}} </p>
                <p>{{asset.description}} </p>
                <button (click)="asset.isShow = true">click</button> 

      </div>

      <div *ngIf="asset.isShow" class="borderPopUp" >
        <p>{{asset.description}} </p>
        <button (click)='asset.isShow = false'>click</button>
      </div>

    </mat-grid-tile>
  </mat-grid-list>
</div>

import { Component, OnInit } from '@angular/core';
import { LearningContentService } from '../../../service/learningcontent.service';
import { ActivatedRoute } from '@angular/router'

import { trigger, style, transition, animate, keyframes, query, stagger } from '@angular/animations';

export class Asset {
  name: string;
  description: string;
  cardtoggle:boolean=false;
  constructor(rawObj: any) {
    this.name = rawObj.name;
    this.description = rawObj.description;
    this.cardtoggle = rawObj.cardtoggle;

  }
}

@Component({
  selector: 'app-catalogue',
  templateUrl: './catalogue.component.html',
  styleUrls: ['./catalogue.component.scss'],
  animations: [
    trigger('listAnimation', [
      transition('* => *', [

        query(':enter', style({ opacity: 0 }), { optional: true }),

        query(':enter', stagger('50ms', [
          animate('1s ease-in', keyframes([
            style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }),
            style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
            style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
          ]))]), { optional: true })
      ])
    ],
    ),
  ]
})
export class CatalogueComponent implements OnInit {
  assets: Array<Asset> = [];

  constructor(private route: ActivatedRoute,
    private learningService: LearningContentService,
  ) {

  }

  ngOnInit() {
    this.loadAssets();

  }


  loadAssets() {
    this.learningService.assets().subscribe((res: any) => {
      const datas: Array<any> = res;
      datas.forEach(asset => this.assets.push(new Asset(asset)));
      console.log(this.assets);
    });
  }

  animate(asset) {
    asset.cardtoggle = true;
  }
  close(asset) {
    asset.cardtoggle = false;
  }
}

<div fxLayout="column">
  <div fxLayout="row">
    <p class="page-heading" fxFlex="80%">Catalogue</p>
    <div class="page-content-filter" fxLayoutAlign="end">
      <button mat-button class="search-btn"><i class="material-icons"> search </i></button>
      <input class="form-filter" matInput placeholder="Search...">
    </div>
  </div>
  <mat-grid-list gutterSize="20px" cols="3" rowHeight="3:1" [@listAnimation]="assets.length">
    <mat-grid-tile *ngFor="let asset of assets">
      <div class="full-width white">
        <div class="padding20px" fxLayout="column" fxLayoutGap="15px">
          <div fxLayout="row" fxLayoutGap="15px">
            <img fxFlex="10" style="width:50px;height:50px;" src="../../../../assets/images/images.jpeg" mat-card-image>
            <b fxFlex="100">{{asset.name}}</b>
            <mat-icon fxLayoutAlign="end end" class="small-icon pointer" (click)="animate(asset)">spa</mat-icon>
          </div>
          <div fxLayout="row" fxLayoutGap="10px">
            <mat-icon class="small-icon">person</mat-icon>
            <p class="small-heading"> Mohit Harshan</p>
            <mat-divider vertical="true"></mat-divider>
            <mat-icon class="small-icon">play_arrow</mat-icon>
            <p class="small-heading">Video</p>
            <mat-divider vertical="true"></mat-divider>
            <mat-icon class="small-icon">face</mat-icon>
            <p class="small-heading">5 points</p>
          </div>
          <mat-progress-bar class="progress" mode="determinate" value="40"></mat-progress-bar>
        </div>
      </div>

      <div class="pull-right" [ngClass]="{'show': asset.cardtoggle }" class="card2">
        <div class="padding20px" fxLayout="column" fxLayoutGap="15px">
          <div fxLayout="row" fxLayoutGap="15px">
            <b fxFlex="100" class="small-heading">{{asset.name}}</b>
            <mat-icon fxLayoutAlign="end end" class="small-icon pointer" (click)="close(asset)">clear</mat-icon>
          </div>
          <div fxLayout="row" fxLayoutGap="10px">
           <p class="small">{{asset.description}}</p>
          </div>
          <div fxLayout="row" fxLayoutGap="10px" fxFLex="100" fxLayoutAlign="end end">
            <button fxFLex="100" mat-button class="green-button" >View Details</button>
          </div>
        </div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</div>

.card2{ 
    position:absolute; 
    z-index: 20; 
    background: white; 
    padding-left: 0px; 
    padding-right:0px; 
    width:100%; 
    height:100%;
    margin-left: 100%;
    transition: margin-left .5s ease-in-out;
} 

.show { 
    margin-left: 0%;
} 

.green-button{
  border:1px solid lightgreen;
  border-radius: 10%;
  font-size: 10px;
  color:green;
}