如何在单击时更改背景颜色，然后淡出为线性渐变？答案

【问题标题】：How can I make a background color change on click and then fade out to a linear gradient?如何在单击时更改背景颜色，然后淡出为线性渐变？
【发布时间】：2021-04-12 14:49:59
【问题描述】：

我在 div 中有一个单选按钮：

<div> 
<input type='radio' class='radio-btn'>
</div>

div的背景是线性渐变：

background-image: linear-gradient(to bottom, #ffffff, #fdfdfd, #fbfcfb, #fafafa, #f8f8f8, #f5f5f5, #f1f1f1, #eeeeee, #e8e8e8, #e1e1e1, #dbdbdb, #d5d5d5);

当我点击输入按钮时，我想将包含的 div 的背景更改为绿色而不进行过渡，然后立即让绿色淡出并返回原始的线性渐变。

到目前为止，这是我所拥有的：

let radioBtn = document.querySelector('.radio-btn');

radioBtn.addEventListener('click', function(e){

function changeColor(){
                    e.target.parentElement.style.transition = '0s';
                    e.target.parentElement.style.background = 'green';
                  }
    
                  function fadeColor(){
                    e.target.parentElement.style.transition = '0.3s';
                    e.target.parentElement.style.background = 'linear-gradient(to bottom, #ffffff, #fdfdfd, #fbfcfb, #fafafa, #f8f8f8, #f5f5f5, #f1f1f1, #eeeeee, #e8e8e8, #e1e1e1, #dbdbdb, #d5d5d5)';
                  }
    
                  changeColor();
                  setTimeout(fadeColor, 100);
})

这会将颜色更改为绿色，等待 100 毫秒，然后将其更改回原始线性渐变，但没有过渡。我已经修改了代码，但无法让它淡出……还有其他方法吗？

谢谢！

【问题讨论】：

遗憾的是，您不能使用带有线性渐变的过渡，请参阅stackoverflow.com/questions/7363141/…

标签： javascript css

【解决方案1】：

虽然您无法直接过渡线性渐变或为背景图像设置动画，但您可以为不透明度设置动画以使事物淡入淡出。

使用 div 的 before 和 after 伪元素来保存它的线性渐变背景图像和绿色背景颜色，我们可以使用 CSS 动画让它们根据需要淡入和淡出。

let radioBtn = document.querySelector('.radio-btn');

radioBtn.addEventListener('click', function(e){

                  function changeColor(){
                    e.target.parentElement.style.backgroundColor = 'green';
                    e.target.parentElement.classList.remove('fadein');
                  }
    
                  function fadeColor(){
                    e.target.parentElement.style.backgroundColor = 'transparent';
                    e.target.parentElement.classList.add('fadein');
                  }

                  changeColor();
                  setTimeout(fadeColor, 100);
})

div
 {
 position: relative;
}


div:before, div:after {
  position: absolute;
  z-index: -1;
 content: '';
 width: 100%;
 height: 100%;
 animation-duration: .3s;
 animation-name: none;
 animation-iteration-count: 1;
 animation-fill-mode: forwards;
 }
 
div:before {
  opacity: 1;
  background-image: linear-gradient(to bottom, #ffffff, #fdfdfd, #fbfcfb, #fafafa, #f8f8f8, #f5f5f5, #f1f1f1, #eeeeee, #e8e8e8, #e1e1e1, #dbdbdb, #d5d5d5);
}

div.fadein:before {
  animation-name: fadeIn;
}

div:after {
  opacity: 0;
  background-color: green;
}

div.fadein:after {
  animation-name: fadeOut;
}

@keyframes fadeIn {
   0% {
     opacity: 0;
     }
 100% {
     opacity: 1;
     }
}

@keyframes fadeOut {
   0% {
     opacity: 1;
     }
 100% {
     opacity: 0;
     }
}
@keyframes none {
  0% {
  }
  100% {
  }
  }

<div> 
<input type='radio' class='radio-btn'>
</div>

【讨论】：