如何讓 Angular 組件動畫遵循 CSS 類更改，而不是靜態樣式？

Question

我創建了一個塊光標日期/時間輸入字段，它使用 Angular 狀態和動畫來指示正在進行的狀態（如被禁用）或動畫過渡狀態（如輸入無效按鍵時的紅色閃光）。 這些輸入字段可以在這里看到： https : //skyviewcafe.com/

export const BACKGROUND_ANIMATIONS = trigger('displayState', [
  state('error',     style({ backgroundColor: getBackgroundColor(ERROR_BACKGROUND, '#F67') })),
  state('normal',    style({ backgroundColor: getBackgroundColor(NORMAL_BACKGROUND, 'white') })),
  state('confirm',   style({ backgroundColor: getBackgroundColor(CONFIRM_BACKGROUND, '#6C6') })),
  state('warning',   style({ backgroundColor: getBackgroundColor(WARNING_BACKGROUND, '#FC6') })),
  state('view-only', style({ backgroundColor: getBackgroundColor(VIEW_ONLY_BACKGROUND, 'black') })),
  state('disabled',  style({ backgroundColor: getBackgroundColor(DISABLED_BACKGROUND, '#CCC') })),
  state('dark-error',     style({ backgroundColor: getBackgroundColor(ERROR_BACKGROUND, '#C36', true) })),
  state('dark-normal',    style({ backgroundColor: getBackgroundColor(NORMAL_BACKGROUND, '#333', true) })),
  state('dark-confirm',   style({ backgroundColor: getBackgroundColor(CONFIRM_BACKGROUND, '#292', true) })),
  state('dark-warning',   style({ backgroundColor: getBackgroundColor(WARNING_BACKGROUND, '#B80', true) })),
  state('dark-view-only', style({ backgroundColor: getBackgroundColor(VIEW_ONLY_BACKGROUND, '#0A0', true) })),
  state('dark-disabled',  style({ backgroundColor: getBackgroundColor(DISABLED_BACKGROUND, '#444', true) })),
  transition('normal => error',   animate(FLASH_DURATION)),
  transition('error => normal',   animate(FLASH_DURATION)),
  transition('normal => confirm', animate(FLASH_DURATION)),
  transition('confirm => normal', animate(FLASH_DURATION)),
  transition('warning => error',  animate(FLASH_DURATION)),
  transition('error => warning',  animate(FLASH_DURATION)),
  transition('dark-normal => dark-error',   animate(FLASH_DURATION)),
  transition('dark-error => dark-normal',   animate(FLASH_DURATION)),
  transition('dark-normal => dark-confirm', animate(FLASH_DURATION)),
  transition('dark-confirm => dark-normal', animate(FLASH_DURATION)),
  transition('dark-warning => dark-error',  animate(FLASH_DURATION)),
  transition('dark-error => dark-warning',  animate(FLASH_DURATION))
]);

上面的動畫定義在一個抽象的超類中，以便具體的子類可以像這樣使用它們：

@Component({
  selector: 'tbw-time-editor',
  animations: [BACKGROUND_ANIMATIONS],
  templateUrl: '../digit-sequence-editor/digit-sequence-editor.directive.html',
  styleUrls: ['../digit-sequence-editor/digit-sequence-editor.directive.scss', './time-editor.component.scss'],
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeEditorComponent), multi: true },
              { provide: NG_VALIDATORS, useExisting: forwardRef(() => TimeEditorComponent), multi: true }]
})
export class TimeEditorComponent extends DigitSequenceEditorDirective<number> implements OnInit {
  ...

首先，我更願意將顯示狀態的數量減少一半。 我認為必須擁有所有這些dark_前綴狀態是一種黑客行為。 我寧願讓這些顏色自動更新，就像它們對 DOM 元素所做的那樣，只需將tbw-dark-mode類添加到我的 HTML 文檔的正文中即可。

我也僅限於支持兩種預定義的模式，亮和暗。 用戶可以自定義亮模式和暗模式，但第三種模式或通用“皮膚”是不可能的。

時機也很重要。 這些顏色在嵌入我的組件的應用程序的初始化期間生成一次，並且我看不到對允許這些狀態定義稍后更新的 Angular API 的訪問。

函數getBackgroundColor()至少允許我在啟動時檢查顏色是如何定義的，但它並不完美（iOS Safari 搞砸了，認為一切都是透明的），所以我必須定義固定的后備值，這些值不能從樣式表更新。

我確實發現了一個令人作嘔的 hack 來動態更新顏色，但這不是我想要依賴的東西！ 我沒有為每種顏色使用一個字符串，而是定義了一個動態顏色對象，如下所示：

class DynamicColor extends String {
  constructor(private colorKey: string) {}

  // ...

  toString(): string {
    return this.colorTable[colorKey];
  }
}

即便如此，也需要對string一些強制類型強制，並強制刷新屏幕以使更改生效。

有沒有更好的辦法？ 一種使用 CSS 類而不是靜態定義樣式的方法？ 我還沒有找到更新@Component裝飾器安裝的動畫的 API？

Answer 1

為什么不為顏色使用 CSS 變量？

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

然后，您可以更改，例如在狀態動畫中將背景顏色從--color-1更改為--color-2 。

在應用程序的單獨部分中，您可以使用如下方式更改這些變量的定義：

@Component({ /*…*/ })
export class MyComponent {
  @HostBinding("style.--color-1")
  private color1: string;

  changeColor1(value: string) {
   this.color1 = value;
  }
}

注意：只要不需要支持 IE，對 CSS 變量的支持就不錯了： https : //caniuse.com/css-variables