更改垫子展开指示器的旋转

Question

我成功地将垫指示器移动到左侧，而不是右侧，并且我使用变换属性使其在展开时向内转动。不过，我希望指示器在展开时朝上，在折叠时朝下。如何正确设置它的样式以实现此目的：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

垫展开指示器的旋转由此动画处理。正如在那里可以看到的，它很简单

rotate(180deg)

（顺时针180度）。指示器最初有

rotate(45deg)

，当面板关闭时默认显示向下图标，当面板打开时默认显示向上图标，并带有顺时针动画。

当您应用旋转时；

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

面板关闭时图标初始向上旋转，单击时顺时针旋转180度。此时，您无法在关闭时显示向下图标，在打开时显示向上图标，因为

rotate(225deg)

如果您更改为松散向内旋转，因为动画是顺时针开始的，但我们需要完全相反。

最终不可能在不覆盖默认动画的情况下进行逆时针旋转。不幸的是，Angular Material 没有任何机制来覆盖默认动画，如此处所示。

所以我的解决方案是完全禁用

mat-expansion-panel-header

上的默认动画，并实现一个模仿 此动画 但逆时针方向的自定义指令。

首先禁用

mat-expansion-panel-header

上的默认动画；

<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;
}

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

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> 这是一个工作演示

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;
      }
    }
  }

Answer 3

谢谢 Ivan，实际上，你只需要这个（不需要禁用动画）（我知道 ng-deep 已被弃用）：

:host ::ng-deep .mat-expansion-panel {
  .mat-expansion-indicator {

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

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

Answer 4

仅供参考 - 对于向下（打开）和向右（关闭），您需要：-45 度和 90 度