垫扩展指示器的旋转由以下方式处理这个动画。正如在那里所看到的,这很简单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
with 相同的时间和行为作为默认动画。
@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