在角形材料中提升md卡

Question

根据材料设计规范：

在台式机上，卡片的静止高度可以为0dp，悬停时可以达到8dp。

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

我考虑过(hover)=用动画来做这个。我不太在乎这种方法，我希望它在悬停时提升。原因是，我在用户界面中将卡片用作按钮。

Answer 1

要更改md卡的海拔高度，请创建一个如下所示的类：

.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 演示。

Answer 2

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

当用户的鼠标进入或离开元素时，此伪指令添加和删除海拔类。

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>

请参阅此演示StackBlitz。

Answer 3

如果有人正在寻找使用材质混合的纯 scss 解决方案：

（归功于@Nehal）我在以下解决方案中使用了这个美丽的过渡：

.elevate-on-hover {
  transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
  &:hover {
    @include mat.elevation(4)
  }

  &--2 {
    &:hover {
      @include mat.elevation(2)
    }
  }

  &--4 {
    &:hover {
      @include mat.elevation(4)
    }
  }

  &--8 {
    &:hover {
      @include mat.elevation(8)
    }
  }
}

你可以这样使用它：

<mat-card class="elevate-on-hover elevate-on-hover--8">

   // stuff...
</mat-card>