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

Question

我想在单击按钮时将渐变背景颜色更改为另一种颜色。这是我在下面显示的Angular Docs的一个例子。此代码适用于普通颜色(在 1000ms 期间缓慢变化 - 正如我想要的那样 - (，但不适用于渐变颜色(1000ms 后立即更改(。

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

到目前为止，线性渐变似乎不支持 tansitions，因此您必须为此找到解决方法。您可以尝试设置两个相互重叠的元素的不透明度。像这样的东西。

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

Answer 2

这段代码适用于普通颜色(在 1000 毫秒内缓慢变化 - 正如我想要的那样 - (，但不适用于渐变颜色(在 1000 毫秒后立即更改(

这样做的原因是linear-gradient不是可动画的 css 属性。

正如另一个答案所提到的，您可以使用不透明度和伪元素的黑客方法。这里有一个关于这样做的很好的教程：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;