使用 Angular 动画更改背景颜色

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

Linear-Gradient 目前似乎不支持转换，因此您必须为此找到解决方法。您可以尝试设置相互重叠的两个元素的不透明度。类似于 this.

这绝对不是一个理想的解决方案，但暂时开始一个想法，也许它对你有帮助

Answer 2

This code works fine with normal colors(changes slowly during 1000ms -as what i want-) but not for gradient colors (changes immediately after 1000ms)

原因是linear-gradient是not an animatable css property。

正如提到的另一个答案，您可以使用不透明和伪元素的 hacky 方法。这是一个关于如何做到这一点的很好的教程：https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

Answer 3

如果您希望过渡渐变，您可以使用伪元素或改变不透明度。将相同的想法应用于动画：[] 如果你愿意的话。

<div class="greenbg" [ngClass]="{'show' : isSolved, 'hide': !isSolved}"></div>
<div class="graybg" [ngClass]="{'show' : !isSolved, 'hide': isSolved}"></div>

.greenbg {
  background: radial-gradient(circle at center, rgba(161, 255, 67,0.4) 0%, #1a1a1a 100%);
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.graybg {
  background: radial-gradient(circle at center, rgba(148, 148, 148, 0.4) 0%, #1a1a1a 100%);
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.show {
  opacity: 1;
  transition: opacity 1s;
}

.hide {
  opacity: 0;
  transition: opacity 1s;
}

isSolved = false;

使用 Angular 动画更改背景颜色

Change background color with Angular animations

angular

css-transitions

linear-gradients

angular-animations