Запустить анимацию на отмеченных кнопках радио и флажков - PullRequest
Новая
       5

Запустить анимацию на отмеченных кнопках радио и флажков

0 голосов
/ 08 января 2019

Я хотел бы анимировать изменение цвета фона body, когда выбрана кнопка radio или checkbox.

Я знаю, как это сделать для одного входа:

JavaScript: 

const apples = document.querySelector("#apples")

apples.addEventListener("change", function() {
  if(this.checked) {
    document.body.style.animation = "switch 1s ease-in-out"
  }     
})

А потом в CSS: 

@keyframes switch {
  to {
    background: red
  }
}

HTML: 

<form>
  <fieldset>
    <label><input type="checkbox" name="foo" id="apples">Apples</label>
    <label><input type="checkbox" name="foo" id="bananas">Bananas</label>
  </fieldset>
  <fieldset>
    <label><input type="radio" name="bar" id="juice">Juice</label>
    <label><input type="radio" name="bar" id="lemonade">Lemonade</label>
  </fieldset>
</form>

Но как я могу сделать это с помощью обычного JavaScript, если у меня есть объект с цветами в паре с id из input? 

const accentColors = {
  apples: "red",
  bananas: "yellow",
  juice: "green",
  lemonade: "yellow"
}

1 Ответ

0 голосов
/ 08 января 2019

Я не уверен, что это лучший метод, но я читал, что один из способов создания динамического @keyframes - это введение динамического CSS, созданного с помощью js. 

    const accentColors = {
      apples: "red",
      bananas: "yellow",
      juice: "green",
      lemonade: "yellow"
    }
    
    let keyFrameStylesToInject = '';
    
    // Create the styles and add event listeners
    Object.keys(accentColors).forEach(k => {
    	keyFrameStylesToInject += `@keyframes switch-${k} {to {background: ${accentColors[k]}}}`;
    	
    	document.querySelector(`#${k}`).addEventListener('change', function(){
    	    if(this.checked) { 
               document.body.style.animation = `switch-${k} 1s ease-in-out`;
            }
            else {
               document.body.style.animation = undefined;
            }
    	});
    });
    
    // Inject the css
    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = keyFrameStylesToInject;
    document.head.appendChild(style);
<form>
  <fieldset>
    <label><input type="checkbox" name="foo" id="apples">Apples</label>
    <label><input type="checkbox" name="foo" id="bananas">Bananas</label>
  </fieldset>
  <fieldset>
    <label><input type="radio" name="bar" id="juice">Juice</label>
    <label><input type="radio" name="bar" id="lemonade">Lemonade</label>
  </fieldset>
</form>
...