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

此代码适用于正常颜色（在1000毫秒内缓慢变化 - 我想要的 - ）但不适用于渐变颜色（1000毫秒后立即更改）

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

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

使用角度动画更改背景颜色

2 个答案: