在角材料中提升 md-card答案

【问题标题】：Elevate md-card in angular material在角材料中提升 md-card
【发布时间】：2021-07-20 01:13:58
【问题描述】：

根据材料设计规范：

在桌面上，卡片可以有 0dp 的静止高度并获得悬停时的高度为 8dp。

如何使用 Angular Material 2 创建这种动画效果？

我考虑过用(hover)= 和动画来做这件事。我真的不关心这种方法，我希望它在悬停时提升。这样做的原因是，我在 UI 中使用卡片作为按钮。

【问题讨论】：

标签： css angular angular-material2

【解决方案1】：

directive 是可重复使用和可配置的，并且可以应用于任意数量的元素。创建指令，并在模块的声明中引用它。

当用户的鼠标进入或离开元素时，该指令添加和删除高程类。

import { Directive, ElementRef, HostListener, Input, Renderer2, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[appMaterialElevation]'
})
export class MaterialElevationDirective implements OnChanges {

  @Input()
  defaultElevation = 2;

  @Input()
  raisedElevation = 8;

  constructor(
    private element: ElementRef,
    private renderer: Renderer2
  ) {
    this.setElevation(this.defaultElevation);
  }

  ngOnChanges(_changes: SimpleChanges) {
    this.setElevation(this.defaultElevation);
  }

  @HostListener('mouseenter')
  onMouseEnter() {
    this.setElevation(this.raisedElevation);
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.setElevation(this.defaultElevation);
  }

  setElevation(amount: number) {
    const elevationPrefix = 'mat-elevation-z';
    // remove all elevation classes
    const classesToRemove = Array.from((<HTMLElement>this.element.nativeElement).classList)
      .filter(c => c.startsWith(elevationPrefix));
    classesToRemove.forEach((c) => {
      this.renderer.removeClass(this.element.nativeElement, c);
    });

    // add the given elevation class
    const newClass = `${elevationPrefix}${amount}`;
    this.renderer.addClass(this.element.nativeElement, newClass);
  }
}

然后可以将指令应用于具有可选输入属性的元素。

<mat-card appMaterialElevation [defaultElevation]="variableHeight" raisedElevation="16">
    <mat-card-header>
        <mat-card-title>Card Title</mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <p>
            This card changes elevation when you hover over it!
        </p>
    </mat-card-content>
</mat-card>

看到这个demo StackBlitz。

【讨论】：

【解决方案2】：

要更改 md-card 的高度，请创建如下类：

.z-depth:hover {
    box-shadow: 0 8px 8px 8px rgba(0,0,0,.2), 0 8px 8px 0 rgba(0,0,0,.14), 0 8px 8px 0 rgba(0,0,0,.12) !important;
    transform: translate3d(0,0,0);
    transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
}

您可以更改box-shadow 数字以找到您正在寻找的确切海拔高度。

Plnkr demo.

【讨论】：

正是我想要的。谢谢！
出于好奇，如何在angular.io 复制“GET STARTED”CTA？
CTA 是什么意思？
"CTA" = 号召性用语。我的意思是说CTA卡（页面底部的卡）它有很好的聚焦效果

【解决方案3】：

对我来说，最好使用预定义的 css 类。并在用户将鼠标悬停在md-card 上时切换此类。要更改 evelavtion 使用 mat-elevation-z{{elevationValue}}

【讨论】：

我喜欢你的方法@Nodarri，如果可以的话，看看一个简单的演示会对我有帮助。谢谢。
@moshe 看看plnkr.co/edit/5fUTBbSj0QuJDeDpIYqM?p=preview
谢谢！ “z-depth”类有什么特别的作用吗？
没什么，只是忘记删除了:)
@Nodarii 谢谢！

【解决方案4】：

另一种方法是在样式文件中获取材质高程类并在其中使用它。例如在我的 scss 文件中：

@use '~@angular/material' as mat;

.my-card {
  // ...some-custom-styles
  &:hover {
    @include mat.elevation(12);
  }
}

【讨论】：