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

问题描述

我成功地将 mat Indicator 向左移动，而不是向右移动，并且我使用了 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;
   } 

全局styles.css

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

推荐答案

mat 扩展指示器的旋转由 这个动画.从那里可以看出，它很简单rotate(180deg)(顺时针180deg).和指示器最初具有 rotate(45deg) 面板关闭时默认显示向下图标，面板打开时显示向上图标并带有顺时针动画.

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;

然后在 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屋！