Question

根据材料设计规范：

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

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

我考虑过使用(hover)=和动画进行此操作。我并不真正关心这种方法，我更倾向于提升它。原因是，我在我的UI中使用卡片作为按钮。

Answer 1

要更改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。

Answer 2

至于我，最好使用预定义的css类。当用户将鼠标悬停在md-card上时，切换此课程。要改变使用mat-elevation-z{{elevationValue}}

的平均值

Answer 3

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。

Answer 4

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

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

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

用角度材料提升md卡

4 个答案: