Можно ли анимировать переход между светлым и темным режимами в Angular Материале? - PullRequest
Новая
       103

Можно ли анимировать переход между светлым и темным режимами в Angular Материале?

0 голосов
/ 01 августа 2020

Angular Материал обычно хорошо сочетается с CSS анимацией. Вы можете использовать анимацию CDK, добавив элемент animations в объявление Component, если вы можете express состояния напрямую как CSS операторы стиля, или, если вы хотите t ie анимации в класс, вы можете сделать что-то вроде этого: 

<div class="selectable" [ngClass]="{ mat-elevation-z4: isSelected, mat-elevation-z1: !isSelected }">
   ...
</div>

с чем-то таким в таблице стилей: 

.selectable {
   transition: all 1s ease-in-out;
}

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

<div
    class="app"
    [ngClass]="{ app-dark: isDark }">
   ...
</div>

с чем-то похожим на приведенное выше в таблице стилей. Приложение переключается со светлого на темное или обратно без проблем, но анимация не происходит. Я пробовал добавить тривиальный класс, например: 

<div
    class="app"
    [ngClass]="{ app-dark: isDark, app-light: !isDark }">
   ...
</div>

, чтобы переход был между двумя классами, но без радости. Есть идеи?

...