时间戳

首页 > 解决方案 > Angular：动画显示卡在另一张卡的顶部

css - Angular：动画显示卡在另一张卡的顶部

问题描述

我使用角度动画生成器来创建动画。我有一个带有卡片列表的网格列表。当我单击一个按钮时，我希望另一个 div 出现在初始卡片的顶部（从左侧浮动以覆盖第一张卡片）。截至目前，该 div 与动画一起出现，但显示在侧面初始卡的。我做了一个stackblitz示例来显示当前的进度。这是我的stackblitz：

https://stackblitz.com/edit/angular-ty4rfh

还在这里粘贴代码：

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();

  }
}

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)="animate(i)">click</button>
         </div>

          <div [ngClass]="!cards[i].isShow?'hide':''" id="{{'div'+i}}" class="border" >

            <p>{{asset.description}} </p>
            <button>click</button>
         </div>

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

CSS：

     p {
  font-family: Lato;
}

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

.hide{
  display:none;
}

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

标签： cssangularangular7angular-animationsangular-material-6

解决方案

检查这个堆栈闪电战

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>

推荐阅读