Облегчение неприменимо к угловым триггерным переходам - PullRequest
Новая
       8

Облегчение неприменимо к угловым триггерным переходам

0 голосов
/ 15 мая 2018

Я создал компонент боковой панели с 3 состояниями, который обеспечивает следующие состояния:

  • Свернуто - Боковая панель полностью скрыта
  • Тонкий - иконка видна с подсказкой
  • Полный - значок и метка видны

Проблема, с которой я столкнулся, заключается в том, что переходы, применяемые с помощью триггера reveal, не выполняют замедление, как определено в их transition функциях.

Все * триггерные переходы slide работают как положено, но триггер reveal просто выполняет изменения стиля без какого-либо ослабления.

См. Определения компонентов ниже и Sample StackBlitz :

Шаблон компонентов боковой панели 

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

Определение компонентов боковой панели 

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

PanelLinkКомпонентный шаблон 

<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>

Определение компонента PanelLink 

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

1 Ответ

0 голосов
/ 16 мая 2018

В конечном итоге я удалил триггер reveal и использовал переходы CSS, основанные на открытом / закрытом состоянии, чтобы выполнить то, что я пытался сделать.

PanelLinkComponent Style 

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>
...