Question

我成功地将mat指标移动到了左边，而不是右边，并且我使用了transform属性使它在扩展时向内转。但是我希望指标在展开时朝上，在折叠时朝下。如何正确设置样式以实现此目的：https://stackblitz.com/edit/indicatorrotation?file=styles.css

expansion-overview-example.css

  .mat-expansion-panel-header {
       flex-direction: row-reverse;
   }

全局样式.css

  .mat-expansion-indicator::after {
      transform: rotate(225deg) !important;  
}

Answer 1

垫子扩展指示器的旋转由this animation处理。如您所见，它很简单rotate(180deg)（顺时针旋转180度）。并且指示器最初具有rotate(45deg)，默认情况下，该面板在关闭面板时显示向下图标，在面板上以顺时针动画显示时默认显示向上图标。

当您使用旋转时；

.mat-expansion-indicator::after {
    transform: rotate(225deg) !important;  
}

当面板关闭时，

图标最初会向上旋转，单击时将其顺时针旋转180度。此时，rotate(225deg)会导致mat-expansion-panel-header的关闭，因此无法显示向下的图标，如果更改为由于动画是顺时针开始而向内旋转，则无法显示向上的图标，但是我们需要相反的操作。

最终，如果不覆盖默认动画，就无法进行逆时针旋转。不幸的是，Angular Material没有任何机制可以覆盖默认动画as seen here。

所以我的解决方案是完全禁用mat-expansion-panel-header上的默认动画，并实现模仿this animation但逆时针旋转的自定义指令。

首先在<mat-expansion-panel-header [@.disabled]="true">上禁用默认动画；

styles.css

然后在@keyframes inwards-open { 0% { transform: rotate(0deg); } 100% { transform: rotate(-135deg); } } @keyframes inwards-close { 0% { transform: rotate(-135deg); } 100% { transform: rotate(0deg); } } .openAnimate { animation: inwards-open 225ms cubic-bezier(0.4,0.0,0.2,1) !important; } .closeAnimate { animation: inwards-close 225ms cubic-bezier(0.4,0.0,0.2,1) !important; }中将same timing and behavior作为默认动画创建新动画。

import { Directive, ElementRef, HostListener, AfterViewInit, OnDestroy } from '@angular/core';
import { fromEvent, Subscription } from 'rxjs';

@Directive({
  selector: '[appCustomMatExpansionToggle]'
})
export class CustomMatExpansionToggleDirective implements AfterViewInit, OnDestroy {
  private elem: HTMLSpanElement;
  private uns: Subscription;
  constructor(private elRef: ElementRef) {}

  ngAfterViewInit() {
    this.elem = this.elRef.nativeElement.querySelector(".mat-expansion-indicator");

    this.uns = fromEvent(this.elem, 'animationend').subscribe(() => {
      this.elem.classList.remove("openAnimate");
      this.elem.classList.remove("closeAnimate");
    });
  }

  @HostListener("opened")
  onOpen() {
    this.elem.classList.add("openAnimate");
  }

  @HostListener("closed")
  onClose() {
    this.elem.classList.add("closeAnimate");
  }

  ngOnDestroy() {
    this.uns.unsubscribe();
  }
}

并实现一个自定义指令，该指令根据面板的打开/关闭事件处理动画状态

mat-expansion-panel

最后将自定义指令应用于<mat-expansion-panel appCustomMatExpansionToggle>

spring.data.rest.max-page-size=1000

这是一个有效的演示https://stackblitz.com/edit/indicatorrotation-mp73uh

Answer 2

禁用默认动画：

<mat-expansion-panel-header [@.disabled]="true">

在一些全局的styles.scss中重写样式

  .mat-expansion-panel {
    .mat-expansion-indicator {
      transition: transform .3s ease;

      &::after {
        transform: rotate(-135deg);
      }
    }

    &.mat-expanded {
      .mat-expansion-indicator {
        transform: rotate(40deg) !important;
      }
    }
  }

更改垫子膨胀指示器的旋转

2 个答案: