如何在單擊時更改背景顏色，然后淡出為線性漸變？

Question

我在 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 的背景更改為綠色而不進行過渡，然后立即使綠色淡出，go 回到原始的線性漸變。

到目前為止，這就是我所擁有的：

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 毫秒，然后將其更改回原始線性漸變，但沒有過渡。 我已經修改了代碼，但無法讓它淡出……還有其他方法嗎？

謝謝！

Answer 1

雖然您不能直接過渡線性漸變或動畫背景圖像，但您可以動畫不透明度以使事物淡入淡出。

使用 div 的前后偽元素來保存其線性漸變背景圖像和綠色背景顏色，我們可以使用 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>