Изменить цвет фона с помощью угловой анимации

Question

Я хочу изменить свой градиентный цвет фона на другой при нажатии кнопки.Вот пример из Angular Docs , как показано ниже.Этот код прекрасно работает с обычными цветами (меняется медленно в течение 1000 мс - как я и хочу), но не для градиентных цветов (меняется сразу после 1000 мс).

animations: [
    trigger('heroState', [
      state('black', style({
         background: 'linear-gradient(to right, #2c2d34, #242424)'
      })),
      state('green',   style({
         background: 'linear-gradient(to right, #2c2d34, #467a5e)'
      })),
  transition('black => green', animate('1000ms ease-out')),
  transition('green => black', animate('1000ms ease-in'))
])


<section class="bg-area" [@heroState]="state"></section>

Answer 1

Этот код прекрасно работает с обычными цветами (медленно меняется в течение 1000 мс - как я хочу), но не для градиентных цветов (меняется сразу после 1000 мс)

Причина этого заключается в том, чточто linear-gradient является не анимируемым свойством CSS .

Как уже упоминалось в другом ответе, вы можете использовать хакерский подход с использованием прозрачности и псевдоэлементов.Вот хороший урок по тому, как это сделать: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

Answer 2

Похоже, что Linear-Gradient не поддерживает переходы на данный момент, поэтому вам придется найти обходной путь для этого.Что-то, что вы можете попробовать, может установить непрозрачность двух элементов, которые накладываются друг на друга.Что-то вроде this .

Это, безусловно, не идеальное решение, но пока стоит идея, и, возможно, она поможет вам