Сниппет для подсветки клика по элементу на чистом JS

Важной кнопке или интерактивному элементу, с которым пользователь может взаимодействовать посредством клика, зачастую не хватает подтверждения совершённого действия.

Для таких случаев автор применяет небольшой JavaScript-сниппет для анимации.

Суть анимации такова: мгновенная установка свойства background-color и последующее плавное изменение его до оригинального значения спустя несколько секунд.

Демо

Код спиппета

Разметка кнопок

<button class="hightlight-me" data-action-background-color="#24C322">
	Некая важная кнопка для нажиманий
</button>

<button class="hightlight-me" data-action-background-color="#E4DE17">
	Еще одна нажимаемая кнопка
</button>

JavaScript код

// выборка элементов
var el = document.querySelectorAll('.hightlight-me');

for(var i=0; i < el.length; i++) {
	// сохранение оригинального цвета
	el[i].dataset.originalBgC = getComputedStyle(el[i]).backgroundColor;
	
	// простановка обработчика на клик
	el[i].addEventListener('click', function() {
		var self = this;
		// сброс css анимации, чтобы применить цвет мгновенно
		this.style.transitionProperty = 'background-color';
		this.style.transitionDuration = '0s';
        // установка цвета из data-аттрибута
		this.style.backgroundColor = this.dataset.actionBackgroundColor;
		
		// учитываем множественные клики
		if(this.dataset.buttonTimer) {
            clearTimeout(this.dataset.buttonTimer);
        }
		
        // таймер на возврат цвета
		this.dataset.buttonTimer = setTimeout(function() {
			// методом css плавно возвращаем цвет обратно
			self.style.transitionDuration = '2s';
			self.style.backgroundColor = self.dataset.originalBgC;
			self.dataset.buttonTimer = null;
		}, 700); 
	});
}

Если вам интересна тема JavaScript-анимаций, рекомендую обратить внимание на часы чертежника , реализованные на canvas.