Угловой мат-слайдер анимируется от 100 до 0 при открытии в диалоге

Question

У меня есть угловой компонент, который открывается в диалоге.Мой мат-слайд определяется следующим образом:

<mat-slider min="0" max="100" [value]="progressBarValue" (change)="changeProgress($event)"></mat-slider>

Но когда диалоговое окно открыто, значение прогресса ползунка циновки анимируется от 100 до 0, даже если я уже установил progressBarValue = 0 в конструкторе.

Не знаю почему.Мои другие компоненты, показывающие то же самое в шаблоне, не имеют такой проблемы.

Кто-нибудь встречал такое поведение?

Я хочу, чтобы это было в 0 без анимации от 100 до 0. Пожалуйста, смотрите в концеGIF.

Я минимизирую исходный код, как показано ниже, все еще есть та же проблема

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-insert',
  templateUrl: './insert.html',
  styleUrls: ['./insert.scss']
})
export class InsertComponent implements OnInit {

    progressBarValue: number;

    constructor() {
        this.progressBarValue = 0;
    }

    ngOnInit() {
    }

}

В компоненте html

<mat-slider min="0" max="100" [value]="progressBarValue"></mat-slider>

В другом компоненте для запуска вышеупомянутого компонента вдиалог

        const dialog = {
           currentTime: 0
        };
        const dialogRef = this.dialog.open(InsertComponent, {
            panelClass: 'app-dialog',
            data: dialog,
            autoFocus: false
        });
        dialogRef.afterClosed().subscribe((currentTime) => {
        });

Если кто-то знает, почему это происходит, пожалуйста, дайте мне знать.Большое спасибо.

Answer 1

Директива атрибута ngStyle в сочетании с назначенными функциями, которые используются в нескольких различных элементах ползунка, запускают преобразования CSS каждый раз, когда изменяется значение ползунка:

<!-- slider html template excerpt -->
<div class="mat-slider-wrapper" #sliderWrapper>
  <div class="mat-slider-track-wrapper">
    <div class="mat-slider-track-background" [ngStyle]="_trackBackgroundStyles"></div>
    <div class="mat-slider-track-fill" [ngStyle]="_trackFillStyles"></div>
  </div>
  ...
</div>

// slider component excerpt
get _trackBackgroundStyles(): { [key: string]: string } {
    const axis = this.vertical ? 'Y' : 'X';
    const scale = this.vertical ? `1, ${1 - this.percent}, 1` : `${1 - this.percent}, 1, 1`;
    const sign = this._shouldInvertMouseCoords() ? '-' : '';

    return {
      // scale3d avoids some rendering issues in Chrome. See #12071.
      transform: `translate${axis}(${sign}${this._thumbGap}px) scale3d(${scale})`
    };
  }
...

(см. Полный источник: MatSlider html source и MatSlider ts source ).

В связи с тем, как компонент создается и внедряется в диалоговое окно, здесь происходит преобразование в процессе инициализации. Поэтому для достижения желаемого поведения CSS-анимации должны быть (временно) отключены.

(возможно, очень хакерское, но работающее) решение - отключить анимацию, добавив класс к mat-slider, который удалит переход и удалит этот класс после завершения инициализации:

<!-- insert.component.html -->
<mat-slider [ngClass]="{'disableAnimation':isAnimationDisabled}" min="0" max="100" [(ngModel)]="progressBarValue" (change)="changeProgress($event)"></mat-slider>

/* insert.component.css */
::ng-deep .disableAnimation *{
 transition: none !important;
}

// insert.component.ts
...

@Component({
  ...
})
export class InsertComponent implements AfterViewInit {
  ...  
  isAnimationDisabled: boolean = true;

  ...

  ngAfterViewInit() {
    setTimeout(() => {
      this.isAnimationDisabled = false;
    })
  }
}

Поскольку процесс инициализации завершается очень и очень быстро, в этом примере вам необходимо использовать setTimeout, в противном случае вы получите ExpressionChangedAfterItHasBeenCheckedError. Чтобы предотвратить это, вы также можете изменить ChangeDetectionStrategy на OnPush и вручную запустить обнаружение изменений после завершения инициализации.

Я создал Stackblitz , чтобы вы могли играть с ним.