改变垫子膨胀指示器的旋转 [英] Changing Rotation of Mat Expansion Indicator

问题描述

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

I was successfully able to move the mat Indicator to the left, instead of the right and I used the transform attribute to make it turn inward when expanding. However I want the indicator to face upward when expanded and downward when collapsed. How do I properly style it to achieve this: 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;  
}

推荐答案

垫扩展指示器的旋转由

mat expansion indicator's rotation is handled by this animation. as it can be seen there it is straightforward rotate(180deg) (180deg clockwise). and indicator initially has rotate(45deg) which show downward icon by default when panel is closed and upward icon when panel is open with clockwise animation.

当您使用旋转时；

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

当面板关闭时，

图标最初会向上旋转，单击时将其顺时针旋转180度.此时，由于rotate(225deg)，您不能显示关闭时的向下图标，而打开时则不能显示向上图标，如果您更改为因为动画是顺时针开始而向内旋转，则无法显示，但是我们需要完全相反.

icon is rotated upwards initially when panel is closed, when clicked it is rotated by 180deg clockwise. at this point you cannot show downwards icon when closed and upwards when open because of rotate(225deg) if you change that you loose inward turning because animation starts clockwise, but we need exactly the opposite.

最终，如果不覆盖默认动画，则无法进行逆时针旋转.不幸的是，Angular Material没有任何机制可以覆盖默认动画，如此处所示 .

eventually it is not possible to have counter-clockwise rotation without overriding default animation. Unfortunately, Angular Material doesn't have any mechanism to override default animations, as seen here .

所以我的解决方案是完全禁用mat-expansion-panel-header上的默认动画并实现模仿

so my solution is to completely disable default animations on mat-expansion-panel-header and implement a custom directive that imitates this animation but counter-clockwise.

首先在mat-expansion-panel-header上禁用默认动画；

first disable default animation on 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;
}

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

and implement a custom directive that handles animation status based on panel open/close events

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

and finally apply the custom directive to mat-expansion-panel

<mat-expansion-panel appCustomMatExpansionToggle>

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

这篇关于改变垫子膨胀指示器的旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！