Question

我创建了一个3状态的侧面板组件，它提供了以下状态：

倒塌 - 侧面板完全隐藏
薄 - 使用工具提示可以看到图标
完整 - 图标和标签可见

我遇到的问题是，通过reveal触发器应用的转换不会执行其transition函数中定义的缓动。

所有slide触发器转换都按预期工作，但reveal触发器只执行样式更改而不进行任何缓动。

请参阅以下组件定义和Sample StackBlitz：

SidepanelComponent模板

<mat-nav-list [@slide]="state">
  <panel-link link="/home" [state]="state" label="Home" icon="home"></panel-link>
</mat-nav-list>

SidepanelComponent定义

import { Component } from '@angular/core';
import { trigger, state, transition, style, animate } from '@angular/animations';
import { SidepanelService } from '../../services/sidepanel.service';

@Component({
  selector: 'sidepanel',
  templateUrl: 'sidepanel.component.html',
  styleUrls: ['sidepanel.component.css'],
  animations: [
    trigger(
      'slide', [
        state('collapse', style({
          width: 0,
          opacity: 0
        })),
        state('thin', style({
          width: '*',
          opacity: 1
        })),
        state('full', style({
          width: '*',
          opacity: 1
        })),
        transition('collapse => thin', animate('500ms ease-out')),
        transition('thin => full', animate('500ms ease-out')),
        transition('full => collapse', animate('500ms ease-in'))
      ]
    )
  ]
})
export class SidepanelComponent {
  private state: string;
  constructor(
    public sidepanel: SidepanelService
  ) {
    sidepanel.state$.subscribe((s: string) => this.state = s);
  }
}

PanelLinkComponent模板

<a mat-list-item [routerLink]="link"
                 routerLinkActive="active"
                 [@slide]="state"
                 [matTooltip]="label"
                 [matTooltipPosition]="tooltipPosition"
                 [matTooltipDisabled]="state !== 'thin'">
  <mat-icon>{{icon}}</mat-icon>
  <span [@reveal]="state">{{label}}</span>
</a>

PanelLinkComponent定义

import { Component, Input } from '@angular/core';
import { trigger, state, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'panel-link',
  templateUrl: 'panel-link.component.html',
  animations: [
    trigger(
      'slide', [
        state('collapse', style({
          width: 0,
          opacity: 0,
        })),
        state('thin', style({
          width: '*',
          opacity: 1
        })),
        state('full', style({
          width: '*',
          opacity: 1
        })),
        transition('collapse => thin', animate('500ms ease-out')),
        transition('full => collapse', animate('500ms ease-in'))
      ]
    ),
    trigger(
      'reveal', [
        state('collapse', style({
          width: 0,
          opacity: 0,
          'margin-left': 0,
          'margin-right': 0,
        })),
        state('thin', style({
          width: 0,
          opacity: 0,
          'margin-left': 0,
          'margin-right': 0,
        })),
        state('full', style({
          width: '100%',
          opacity: 1,
          'margin-left': '15px',
          'margin-right': '10px',
        })),
        transition('thin => full', animate('500ms ease-out')),
        transition('full => collapse', animate('500ms ease-in'))
      ]
    )
  ]
})
export class PanelLinkComponent {
  @Input() link: string;
  @Input() state = 'thin';
  @Input() label = 'Home';
  @Input() tooltipPosition = 'right';
  @Input() icon = 'home';
}

Answer 1

最终，我最终删除了reveal触发器并使用基于打开/关闭状态的CSS转换来完成我想要做的事情。

PanelLinkComponent风格

a span.closed {
  opacity: 0;
  width: 0;
  margin-left: 0;
  margin-right: 0;
  transition: opacity 100ms, width 100ms, margin-left 100ms, margin-right 100ms;
  transition-timing-function: ease-out;
}

a span.open {
  opacity: 1;
  width: 100%;
  margin-left: 15px;
  margin-right: 10px;
  transition: opacity 100ms, width 100ms, margin-left 100ms, margin-right 100ms;
  transition-timing-function: ease-in;
}

PanelLinkComponent模板

<a mat-list-item [routerLink]="link"
                 routerLinkActive="active"
                 [@slide]="state"
                 [matTooltip]="label"
                 [matTooltipPosition]="tooltipPosition"
                 [matTooltipDisabled]="state !== 'thin'">
  <mat-icon>{{icon}}</mat-icon>
  <span [ngClass]="{'closed': state !== 'full', 'open': state === 'full'}">{{label}}</span>
</a>

轻松不适用于角度触发转换

1 个答案: