从JavaScript CSS更改属性时动画

Question

如果我尝试此代码，我刚刚写过：

function changeBackgroundColor() {
  const clickingDiv = document.getElementById("test");
  clickingDiv.style.setProperty("--primary-color-new", "#3474A7");
  clickingDiv.style.setProperty("--secondary-color-new", "#ffd340");
  clickingDiv.style.animation = "change-background 1s";
  clickingDiv.classList.add("change-bg");

  setTimeout(() => {
    clickingDiv.style.setProperty("--primary-color", "#3474A7");
    clickingDiv.style.setProperty("--secondary-color", "#ffd340");
    clickingDiv.style.animation = "";
    clickingDiv.classList.remove("change-bg");
  }, 1000);
}

@keyframes change-background {
    from {
        background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    }
    to {
        background: linear-gradient(to right, var(--primary-color-new), var(--secondary-color-new));
    }
}

#test {
  width: 500px;
  height: 500px;
}

.change-bg {
    animation-name: change-background;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timing-function: ease;
}

<div id="test" style="--primary-color: #2568f6; --secondary-color: #804cda;">
  <button onclick="changeBackgroundColor()">click me</button>
</div>

动画不起作用，它直接从第一种颜色切换到另一种颜色。 （通常我从API中检索颜色）

我想在两个值之间进行过渡

Answer 1

我发现线性梯度过渡 /动画不起作用。要解决此错误，我只使用了具有不透明的包装器，例如 this 所以这是修改的代码：

function changeBackgroundColor() {
  const wrapper = document.getElementById("wrapper");
  const element = document.getElementById("test");

  if (!wrapper.classList.contains("wrapper-moving")) {
    wrapper.classList.add("wrapper-moving");
    wrapper.style.setProperty("--new-primary-color", "#2568f6");
    wrapper.style.setProperty("--new-secondary-color", "#804cda");


    setTimeout(() => {
      element.style.setProperty("--primary-color", "#2568f6");
      element.style.setProperty("--secondary-color", "#804cda");
      wrapper.classList.remove("wrapper-moving");
    }, 1000);
  }
}

#test {
  width: 500px;
  height: 500px;
  background: linear-gradient(to right, #3474A7, #ffd340);
  z-index: 1;
}

.wrapper {
  z-index:-1;
  height: 600px;
  width: 600px;
  position: absolute;
  transition: all 1s;
  background: linear-gradient(to right, var(--new-primary-color), var(--new-secondary-color));
}

.wrapper:not(.wrapper.wrapper-moving) {
  opacity: 0;
}
.wrapper.wrapper-moving {
  opacity: 1;
}

<div id="test" style="--primary-color: #2568f6; --secondary-color: #804cda;">
  <div id="wrapper" class="wrapper"></div>
  <button onclick="changeBackgroundColor()">click me</button>
</div>

（在我的情况下，我无法正常工作，但这是答案）