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

r7s23pms  于 2023-04-01  发布在  其他
关注(0)|答案(3)|浏览(136)

我成功地将垫子指示器向左移动,而不是向右移动,并且我使用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;  
}
mwkjh3gx

mwkjh3gx1#

垫扩展指示器的旋转是由这个动画处理.正如它可以在那里看到它是简单的rotate(180deg)(180 deg顺时针).和指示器最初有rotate(45deg)其中显示向下图标默认情况下当面板关闭和向上图标时面板打开顺时针动画.
应用旋转时;

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

图标是向上旋转最初当面板关闭,当点击它是由180 deg顺时针旋转.在这一点上,你不能显示向下图标时关闭和向上时打开,因为rotate(225deg),如果你改变,你松向内转动,因为动画开始顺时针,但我们需要完全相反.
最后,如果不覆盖默认动画,逆时针旋转是不可能的。不幸的是,Angular 材质没有任何机制来覆盖默认动画,as seen here
所以我的解决方案是完全禁用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

x6492ojm

x6492ojm2#

禁用默认动画:

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

在一些全局样式中重写样式。scss

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

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

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

but5z9lq3#

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

相关问题